Plain text selector in jQuery

Question

I'd like to keep the first <a> and the <span>, but remove the rest in the following:

<div>
    <a href="http://aerospace.com"&gt;Aerospace&lt;/a&gt; and 
    <a href="http://aviation.com"&gt;Aviation&lt;/a&gt;
    <span class="blah">(15)</span>
</div>

What I'm finding is that there doesn't seem to be an obvious of matching the plain text and . I'm trying to use nextAll() with a filter:

$("a:contains('Aerospace')").each(function() {
    $(this).nextAll().filter(":not(span)").empty();
});

But the and text is left there.

Is it possible to match text in jQuery? Is there such a thing as a text selector so I could use something like filter (":isText()")?

Answer 1

$("a:contains('Aerospace')").parent().contents().each(function() {
    if ( this.nodeType == 3 ) {
        var text = this.textContent? this.textContent: this.innerText;
        text = $.trim( text );
        if ( text.length ) {
            alert( text );
        }
    }
});

Off the top of my head something like this should work, you descend upwards to the parent and operate on all the contents, not just element nodes which have a nodeType of 1 but including textNodes which have a nodeType of 3.

Let me know if that doesn't work.

Answer 2

How about copying the span, then removing everything from the div, then putting the span back in?

$("a:contains('Aerospace')").each(function()
{
    var span = $(this).parent().children("span").clone();
    $(this).parent().empty().append(span);
});