jquery: removing everything after an element

Question

Hi,

I have html code like this:

<li>
<a href=''>Example</a>&nbsp;<a href='' class='sub'>Edit</a>&nbsp;<a href='' class='sub'>Delete</a>
</li>

and I want to remove everything after the first </a>, including the spaces. What is the most elegant and simple way to do this? I have achieved my purpose with the following jquery:

$('li').children(".sub").remove();    
$('li').html($('li').html().replace(/ /g,''));

but the second line looks too much like a hack. Is there a better way?

Answer 1

You could do something like this instead:

$('li a:first-child').each(function() {
    $(this).parent().html(this);
});​

This would clean out the parent including event handlers on those elements then put the first <a> back. It would also maintain any event handlers on the anchor you're keeping, you can give it a try here. Passing a DOM element to .html() is a shortcut for .empty() and .append(), just making it a bit more terse.

Answer 2

What about this?

$('li').html($('li').find("a:first").html())

EDIT 1: The above code is wrong. Try the following:

$('li').find("a:first").appendTo($('li').html(""));

Thanks Nick.

Answer 3

The easiest way would be to perhaps wrap the Edit/Delete links you're wanting to remove inside of a div (or other element of your choice) and then remove it all at once. You're almost there with the first line of code.

Instead of putting a class='sub' on each anchor, you could instead do something like:

<li>
<a href=''>Example</a><div class='sub'>&nbsp;<a href=''>Edit</a>&nbsp;<a href=''>Delete</a></div>
</li>

And then you'd have:

$('li').children(".sub").remove(); 

Just as you currently do, and it should remove the div, with the spaces.

Answer 4

You can try:

$('li').html($('li a:first-child'));