querySelectorAll elements which aren't in a parent with display: none

Viewed 101

I'm trying to get all the (specific) elements which aren't in parents with display: none.

Currently, I'm using the following:

const displayNoneElements = Array.from(
    document.querySelectorAll(
        '*not:[style*="display:none;"], [style*="display: none"], [style*="display: none;"], [style*="display:none"]'
    )
);

const hiddenIssues = displayNoneElements.flatMap((element) =>
    Array.from(element.querySelectorAll(SPECIFIC_TAG))
);

// Filters the issues which are in parents with display none
issues = Array.from(document.getElementsByTagName(SPECIFIC_TAG)).filter((issue) => {
    for (let hiddenIssue of hiddenIssues) {
        if (hiddenIssue.isSameNode(issue)) {
            return false;
        }
    }
    return true;
});

The code above is doing the work, but I'm sure there is more elegant solution with just some proper selectors.

Thanks in advance.

0 Answers
Related