Select only elements that have no children except the child element is a <wbr></wbr>

Question

I want to select elements that have no child elements. This is because I want to select all the texts in a very complex website.

I do this like so:

$mainSection.filter(":not(:has(*))");

But then there are some special cases like this one:

<p>Some interesting text <wbr></wbr> that has an "optional word break" tag in it</p>

In this case I want to select the p, even if there is child element in it. But just if the child element is a wbr tag.

Answer 1

You can have another :not() within the :has() for excluding certain child elements:

$mainSection.filter(":not(:has(:not(wbr)))");

On a side note, if the outer :not() is the only part of your .filter() selector string, you can simply swap the .filter() out for a .not() to make the code a little less confusing:

$mainSection.not(":has(:not(wbr))");

Both of these statements mean the same thing in English: exclude elements from the set $mainSection that have any child elements that are not wbr .