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

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>开发者_StackOverflow社区

My existing dodgy code is:

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

Any ideas?

Cheers, James

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(' » » ',' » '));  
});

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.