Question

我正在尝试使用jQuery编辑HTML（来自textarea）的字符串。当我使用此代码时，链接将从结果字符串中删除，如预期的那样：

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

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

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

为什么这不起作用？我已经阅读了jQuery API documentation for .remove()，但我仍然不明白。

Answer 1

remove对已经匹配的元素集合进行操作，如果您传递参数，可以选择过滤该集合。所以这是每个版本的作用：

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

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

查找<a>集合中的所有#foo元素并将其删除：

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

如果#foo不是<a>本身，那么最后一个绝对不会做任何事情;如果是（<a id="foo">），则此元素将被删除。它与你写的一样基本相同

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

希望这会有所帮助。：）

Answer 2

'a'选择器是顶级过滤器。它接受当前集合，查找与选择器匹配的元素，并将其删除。

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

过滤器不会搜索嵌套元素。

所以，如果你这样做......

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

... .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>

...然后只会从集合

中删除顶层的<a>元素

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

$（'＃foo'）。remove（'a'）和$（'＃foo'）之间的区别.find（'a'）。remove（）

3 个答案: