Javascript CSS选择器最后一个子vs最后一个

我这里有一个片段：

$（'#添加'）。单击（函数（）{
$（“#列表”）。在（“一些文本内部
一些文本内部
一些文本内部
”）之后；
});
$（“#删除”）。单击（函数（）{
$（'.container editor:last child'）.remove（）；
});
.container编辑器{
填充物：5em 2em 1.5em；
边缘顶部：10px；
盒影：1px 0 10px 1px rgba（0,0,0,0.3）；
}

里面有些文字

里面有些文字

里面有些文字




add remove
因为您没有将新元素添加到
#list
中，所以第一个编辑器是唯一满足
最后一个子项
选择器的编辑器

使用
.append（）
添加以下元素，而不是在
之后使用


$（'#添加'）。单击（函数（）{
$（“#列表”）。追加（一些文本内
一些文本内
一些文本内
）；
});
$（“#删除”）。单击（函数（）{
$（'.container editor:last child'）.remove（）；
});
.container编辑器{
填充物：5em 2em 1.5em；
边缘顶部：10px；
盒影：1px 0 10px 1px rgba（0,0,0,0.3）；
}

里面有些文字

里面有些文字

里面有些文字





添加
删除
这是因为首先它在
#list
div中，并且您正在指定它的'
最后一个子项
，因此您需要将它附加到
#list
div中，然后您需要应用它

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

你可以用

$（'#list'）。追加（“
一些文本在里面
一些文本在里面
一些文本在里面
）

而不是

使用

您将在列表后添加元素，而不是在列表内。因此，第一次调用
remove
时，它会工作，因为有一个
.container编辑器
，它也是其父级（原始子级）的
：最后一个子级
。但是，您使用Add按钮添加的对象永远不是父对象中的最后一个子对象，它们后面跟着几个
br
元素。（请记住，
.container editor:last child
表示“具有类
container editor
和的元素是其父元素中的最后一个子元素。”）

相反，jQuery
：last
扩展不关心匹配项是否是最后一个子项，只关心它是否是列表中的最后一个

您可能想将那些
.container editor
元素插入
#list
内部，而不是在其后面。改变

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

到


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

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