Question

I am trying to edit a string of HTML (from a textarea) using jQuery. When I use this code, links are removed from the resulting string, as expected:

      $('#foo').find('a').remove();
      $('#foo').html(); // links are removed, as expected

But when I use the code below, the links don’t get removed.

      $('#foo').remove('a');
      $('#foo').html(); // links are still there

Why doesn’t this work? I have read the jQuery API documentation for .remove(), and I still don’t understand.

Answer 1

The 'a' selector is a top level filter. It takes the current set, looks for elements that match the selector, and removes them.

$('#foo').remove('a');

The filter doesn’t search nested elements.

So if you did this…

$('.myClass').remove('a');

…and the .myClass selector matched the following elements…

<p class="myClass">a paragraph</p>
<a class="myClass">an anchor</a>  <!-- will be removed -->
<p class="myClass">
    <a>a NESTED anchor</a>
</p>
<a class="myClass">an anchor</a>  <!-- will be removed -->
<a class="myClass">an anchor</a>  <!-- will be removed -->
<p class="myClass">
    <a>a NESTED anchor</a>
</p>
<p class="myClass">a paragraph</p>

…then only the <a> elements at the top level would be removed from the set