$('#foo').remove('a')和$('#foo').find('a').remove()之间的差异

Question

我正在尝试使用jQuery编辑一个超文本标记语言字符串(从一个文本区域)。当我使用这段代码时，链接被从结果字符串中删除，正如预期的那样：

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

但是当我使用下面的代码时，链接不会被删除。

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

为什么这个不起作用？我读过jQuery接口documentation for .remove()，但还是不明白。

Answer 1

'a'选择器是一个顶级过滤器。它获取当前集合，查找与选择器匹配的元素，然后删除它们。

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

过滤器不搜索嵌套元素。

所以如果你这么做了..。

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

...and .myClass选择器与以下元素匹配...

<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只有顶层的<a>元素会从集合中删除

Answer 2

remove对已匹配的元素集进行操作，如果向其传递参数，则可以进一步过滤该元素集。下面是每个版本的功能：

找到#foo的所有<a>后代并将其删除：

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

找到#foo集合中的所有<a>元素并删除它们：

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

因此，如果#foo本身不是<a>，那么最后一个元素将完全不做任何事情；如果它是(<a id="foo">)，那么这个元素将被删除。它本质上和你写的一样

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

希望这能有所帮助。:)

Answer 3

不同的是

$('#foo').remove('a');//This will help to get rid of <a /> in the dom structure.
$('#foo').remove();//This will remove the element with id foo