jquery not（）没有删除孩子

Question

我有以下代码：

var carol = "<h1>something</h1><div><span class='icon-edit'></span> lalalallalala </div>"
$('<div>').append($(carol).not('span.icon-edit')).html()

它仍然输出：

"<h1>something</h1><div><span class="icon-edit"></span> lalalallalala </div>"

基本上不是没有删除任何东西。

为什么呢？以及如何删除它？

Answer 1

考虑carol：

var carol = "<h1>something</h1><div><span class='icon-edit'></span> lalalallalala </div>";

执行$(carol)时创建的是包含两个元素的jQuery对象，即：

• 0：<h1>something</h1>
• 1：<div><span class='icon-edit'></span> lalalallalala </div>

因此，当您调用$(carol).not('span.icon-edit')时，您要求jQuery过滤掉该集合中的每个span.icon-edit。然后就是：

• <h1>something</h1>是span.icon-edit吗？没有。然后保留它。
• <div><span class='icon-edit'></span> lalalallalala </div>是span.icon-edit吗？请注意，它与div“匹配”，而不是内部span。那么，div是span.icon-edit吗？好吧，不。然后保留它。

因此，由于.not('span.icon-edit')过滤了该集合中的任何内容，因此执行

$('<div>').append($(carol).not('span.icon-edit')).html()

与

相同

$('<div>').append($(carol)).html()

因此屈服

"<h1>something</h1><div><span class="icon-edit"></span> lalalallalala </div>"

删除span.icon-edit孩子

由于上述相同原因，在父级上调用$(carol).remove('span.icon-edit')无效。它在（顶级）集合中找不到span.icon-edit，因此它不会删除任何内容。

为了让孩子离开，你可以：

var carol = "<h1>something</h1><div><span class='icon-edit'></span> lalalallalala </div>"
$('<div>').append($(carol).find('span.icon-edit').remove().end()).html()

<强>输出：

"<h1>something</h1><div> lalalallalala </div>"

所以，它的组合：

• .find('span.icon-edit')：匹配HTML中的span（carol）
• .remove()：删除匹配的span
• .end()：由于.remove()将返回已删除的span，并且您希望原始集合.end()将集合返回到之前的状态（它具有元素h1和div）