Question

我在这里有一个片段：

$('#add').click(function(){
    $('#list').after("<div class='container-editor'><p>some text inside</p><p>some text inside</p><p>some text inside</p></div>");
});

$('#remove').click(function(){
    $('.container-editor:last-child').remove();
});

.container-editor {
    padding: .5em 2em 1.5em;
    margin-top: 10px;
    box-shadow: 1px 0 10px 1px rgba(0,0,0,0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='list'>
    <div class='container-editor'>
        <p>some text inside</p>
        <p>some text inside</p>
        <p>some text inside</p>
    </div>
</div>
<br><br>
<button id='add'>add</button>&nbsp;&nbsp;<button id='remove'>remove</button>

通过单击“添加”按钮，会在末尾附加一个新div。通过单击“删除”按钮，将删除最后一个“.container-editor”元素。

但是，上面链接的JsFiddle中的删除按钮只能运行一次。

如果我更改以下代码：

$('.container-editor:last-child').remove();

到

$('.container-editor:last').remove();

然后，删除按钮可以多次使用。

我的问题是为什么:last-child选择器在删除元素后停止工作？ documentation

中未说明此效果

更新：感谢您的所有投入。是的，我使用after代替insert时犯了一个错误。但是，感谢@ T.J。克劳德，很高兴知道：

.container-editor：last-child表示在其父元素中选择类container-editor的最后一个子节点。

：最后不关心父母，只会选择最后一个。

我添加了这个新代码段来说明.container-editor:last-child

的独特部分

$('#remove').click(function(){
    $('.container-editor:last-child').remove();
});

.container-editor {
    padding: .5em 2em 1.5em;
    margin-top: 10px;
    box-shadow: 1px 0 10px 1px rgba(0,0,0,0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='container-editor'>
  <p>some text inside</p>
  <p>some text inside</p>
  <p>some text inside</p>
</div>

<div class='container-editor'>
  <p>some text inside</p>
  <p>some text inside</p>
  <p>some text inside</p>
</div>

<div class='container-editor'>
  <p>some text inside</p>
  <p>some text inside</p>
  <p>some text inside</p>
</div>

<br><br>
<button id='remove'>remove</button>

在这种情况下，删除按钮不起作用，因为所有.container-editor元素都没有父级。

Answer 1

因为您没有将新元素添加到#list，所以第一个编辑器是唯一满足last-child选择器的编辑器。

而不是使用after使用.append()添加像

这样的元素

＆＃13;

$('#add').click(function() {
  $('#list').append("<div class='container-editor'><p>some text inside</p><p>some text inside</p><p>some text inside</p></div>");
});

$('#remove').click(function() {
  $('.container-editor:last-child').remove();
});

＆＃13;

.container-editor {
  padding: .5em 2em 1.5em;
  margin-top: 10px;
  box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='list'>
  <div class='container-editor'>
    <p>some text inside</p>
    <p>some text inside</p>
    <p>some text inside</p>
  </div>
</div>
<br>
<br>
<button id='add'>add</button>&nbsp;&nbsp;
<button id='remove'>remove</button>

＆＃13;

Answer 2

这是因为首先它位于#list div内，并且您正在指定其＆＃39; last child因此您需要将其附加到#list div中，然后您需要申请。

$('.container-editor:last-child').remove();

您可以使用.append()

$('#list').append("<div class='container-editor'>
  <p>some text inside</p><p>some text inside</p><p>some text inside</p></div>")

而不是

使用.after()

Demo

Answer 3

您在 #list之后添加元素，而不是在其中。因此，当您第一次拨打remove时，它会起作用，因为有一个.container-editor也是其父级:last-child（原始的一个）。但是，您在“添加”按钮中添加的内容绝不是其父级中的:last-child，而是后面跟着几个br元素。（请记住，.container-editor:last-child表示＆＃34;具有类container-editor 和的元素是其父元素中的最后一个子元素。＆＃34;）

相比之下，jQuery :last扩展并不关心匹配的是最后一个子，只是它是列表中的最后一个。

您可能打算在 .container-editor内插入#list元素，而不是在其之后。变化

$('#list').after(...

到

$('#list').append(...

Updated Fiddle

CSS选择器last-child vs last

3 个答案:

Demo