Question

Possible Duplicate:
Remove text with jQuery

<div class="pun-crumbs"><p class="crumbs">
<a href="/">Forum</a>
<strong>
 »
<a class="nav" href="/c4-our-mods">Test</a>
 » 
<a class="nav" href="/f7-forum">
<span>Test 1</span>
</a>
</strong>
</p>
</div>

How do I remove the second ‘»’ via jquery ? Thanks for answering my question 🙂 .
Note: I can’t edit the html.

Answer 1

jQuery doesn’t have much support for text nodes so if the text you’re looking for isn’t wrapped in it’s own element, then you can do it something like this:

var cntr = 0;
$(".pun-crumbs strong").contents().each(function() {
    // nodeType 3 is text nodes
    // nodeValue is the contents of a text node
    if (this.nodeType == 3 && this.nodeValue.indexOf("»") != -1) {
        ++cntr;
        if (cntr == 2) {
           this.parentNode.removeChild(this);
        }
    }
});

You can see it work here: http://jsfiddle.net/jfriend00/5AdNM/

This is generally advantageous over code that modifies innerHTML because this code won’t mess with any event handlers that may already be applied whereas assigning a new, changed value to innerHTML will wipe out any event handlers (because it recreates new DOM objects).

This version of the code removes the whole text node that contains the chevron because that looked to be the most convenient things for your particular HTML. If you wanted to leave other text in that text node, you could use .replace() to remove just the chevron from the text mode and leave the other text.

This other version of the code would remove just the chevron, leaving other stuff in that text node:

var cntr = 0;
$(".pun-crumbs strong").contents().each(function() {
    // nodeType 3 is text nodes
    // nodeValue is the contents of a text node
    if (this.nodeType == 3 && this.nodeValue.indexOf("»") != -1) {
        ++cntr;
        if (cntr == 2) {
           this.nodeValue = this.nodeValue.replace("»", "");
        }
    }
});​

You can see this one work here: http://jsfiddle.net/jfriend00/XsnEW/

If you control the HTML and can put the chevrons in their own span with a unique class name on them, then it’s a lot easier to do with plain jQuery.

Here’s a bit simpler version that removes the chevron text node:

$(".pun-crumbs strong").contents().filter(function() {
    return (this.nodeType == 3 && this.nodeValue.indexOf("»") != -1);
}).eq(1).remove();

or modifies it:

var textNode = $(".pun-crumbs strong").contents().filter(function() {
    return (this.nodeType == 3 && this.nodeValue.indexOf("»") != -1);
}).get(1);
textNode.nodeValue = textNode.nodeValue.replace("»", "");