Question

根据.remove() | jQuery API Documentation，将选择器作为.remove()的可选参数包含在内是完全有效的。引用：

我们还可以包含一个选择器作为可选参数。例如，我们可以按如下方式重写之前的DOM删除代码：

$( "div" ).remove( ".hello" );

所以我写了2个div来测试它：

<div id="div1">test
    <div id="div2">Remove</div>
</div>

将其用作jQuery：

$( document ).ready(function() {
    $( "#div1" ).remove( "#div2" );
});

它没有按预期删除div。结果是：

测试
删除

改为使用：

$( document ).ready(function() {
    $("#div2").remove();
});

按预期删除div。那我在这里错过了什么？文档错了吗？我误解了什么吗？

Answer 1

您误解了选择器参数的作用。它正在过滤第一组对象。

From the docs：

一个选择器表达式，用于过滤匹配元素集除去。

因此，您的"#div2"选择器不会作为"#div1"元素的一部分存在。例如，假设我有以下内容：

<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red notneeded">Red</div>
<div class="red notneeded">Red</div>
<div class="red">Red</div>

然后，我打电话给以下人员：

$(function () {
  $("div.red").remove(".notneeded");
});

我将留下以下内容：

<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Red</div>

因此，jQuery匹配集是所有具有red类的div - 第二个选择器（".notneeded"）将过滤具有notneeded类的第一个匹配集 - 然后它将删除它们。

Answer 2

您的代码无法正常工作的原因是选择器用于过滤原始列表（在您的情况下为"#div1"）。你无法移除这样的孩子。您必须选择孩子，然后选择.remove()：

＆＃13;

$('#div1').children('#div2').remove() // or .find('#div2').remove() if it's nested deeper

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">test
    <div id="div2">Remove</div>
</div>

＆＃13;

选择器工作的地方是实际过滤列表的时间，如下所示：

＆＃13;

$('div').remove('.remove')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="keep">test1</div>
<div id="div2" class="remove">test2</div>
<div id="div3" class="keep">test3</div>

＆＃13;

Answer 3

这是不正常的代码吗？

$( document ).ready(function() {
$( "#div1" ).remove( "#div2" );

}）;

这就是你想要做的事情？

$( "div" ).remove( ".hello" );

试试这个。上面的代码意味着它将删除所有＆＃34; div＆＃34;包含class =＆＃34; hello＆＃34;。

的标记

$( document ).ready(function() {
$( "div" ).remove( "#div2" );

}）;

Answer 4

.remove（[selector]）如何工作的一个例子：

    $('.of-these-items').remove('.these-items');

如果我们有：

    <ul>
       <li class="of-these-items">1</li>
       <li class="of-these-items">2</li>
       <li class="of-these-items these-items">3</li>
       <li class="of-these-items these-items">4</li>
       <li class="of-these-items">5</li>
    <ul>

“这些商品，删除这些商品”：

    <ul>
       <li class="of-these-items">1</li>
       <li class="of-these-items">2</li>
       <li class="of-these-items">5</li>
    <ul>

带选择器的jQuery .remove（）不起作用

4 个答案: