Ignore child elements when selecting elements in jQuery

Question

here is my HTML:

<div class="foo">
    <span class="ignore_this">IGNORE THIS TEXT</span>
    SELECT THIS
</div>

I'm trying to figure out how to select all the stuff inside foo, but not the stuff inside ignore_this:

$("div.foo:not(span.ignore_this)").text()

but I can't figure out how.

Answer 1

The selector div.foo:not(span.ignore_this) is saying "match every div.foo that isn't a span.ignore_this" which is only going to select one element: div.foo. If you restructured your html like this:

<div class="foo">
    <span class="ignore_this">IGNORE THIS TEXT</span>
    <span>SELECT THIS</span>
</div>

Then you could call:

$('div.foo span:not(.ignore_this)').text();

Which matches all span elements which are descendants of a div.foo that are not .ignore_this.

If you don't have the luxury of reformatting the html, then you could accomplish what you want with extra processor cycles:

var clone = $('div.foo').clone();
$('span.ignore_this', clone).remove();
var text = clone.text();