Question

I’m having multiple almost identical span in an html page

<span class="title">          
 <span class="icon icon-title" title="Title">Title:</span> 
 <a href="LINK_HERE">PAGE_TITLE_HERE</a> remove this
</span>

There are several of such on page in div’s and li’s of identical classes, the only thing that differs is the LINK_HERE and PAGE_TITLE_HERE.

What I need to do is remove the "remove this" text from the span’s. What I managed to do is a clumsy replace solution which looks like this:

('div.content').html($('div.content').html().replace(/remove this/g,' '))

I’m not exactly happy with this as it replaces all occurences of the words on page and causes certain issues with other code present. If I limit div.content to .title, strange things start to happen – all the occurences of the abovementioned span become copies of the first occurence. I.e.

1 remove this
2 remove this
3 remove this

turns into

1
1
1

Could anyone suggest a more elegant solution to remove replace or hide the “remove this” text, perhaps, using .slice or .trim or .remove or a combination of those?

Thanks in advance.

Answer 1

The easiest way is to just remove the last child of span.title, since you know that’s where the text you want is

http://jsfiddle.net/LCUea/2/

$('span.title').each(function(){
  this.removeChild(this.lastChild);
});​