Change an element's text without affecting sibling tags (jQuery)

Question

I'm trying to modify this bit of HTML with jQuery to delete the duplicate arrow:

<div class="breadcrumb">
<a href="/spa/">Home</a> »  » <a href="/spa/image/tid">Image galleries</a>
</div>

I'm not having much luck, however, in that replacing the string using the replace() function seems to strip the HTML tags as well, leaving:

<div class="breadcrumb">Home » Image galleries</div>

My existing dodgy code is:

$('.breadcrumb').each(function() { 
    var mytext = $(this); 
    var mytext2 = mytext.text(); 
    mytext.text(mytext2.replace(' » » ',' » ')); 
});

Any ideas?

Cheers, James

Answer 1

First of all, it is generally bad idea to fix markup with JavaScript: unnecessary use of JavaScript should always be avoided. Also JavaScript doesn't fix the problem on environments in which JavaScript is not supported.

Could you configure Drupal instead so the problem wouldn't appear in the first place?

Answer 2

You can remove arrow via these in template.php of your theme: http://api.drupal.org/api/function/theme_breadcrumb/6 as YOURTHEME_breadcrumb function.

Answer 3

It sounds like you're modifying the code using innerText or jQuery's .text(). When using these, HTML is stripped out and only the text is returned. Use .innerHTML or .html() instead.

Using your "dodgy" code:

$('.breadcrumb').each(function() {  
    var mytext = $(this);  
    var mytext2 = mytext.html();  
    mytext.html(mytext2.replace(' » » ',' » '));  
});