动态删除div的子项

Question

我有一个div，可以创建动态子div

<div id="abcd">
<div class="myclass">Hello</div>
<div class="myclass">World</div>
</div>

有许多div是动态生成的，我需要删除所有的子div而不删除第一个div，即div表示＆＃34; Hello＆＃34;。

Answer 1

试试这个：JSFIDDLE

$('#abcd').find('.myclass:not(:first)').remove()

Answer 2

如果你想要有趣的话还有一个选择：）

$('#abcd > * + *').remove();

它使用CSS选择器来选择直接子项>（所有.myclass div），并且在其中仅匹配任何（{{1}的下一个直接兄弟（+）前一个元素。实际上，这意味着所有的孩子都会被匹配，当然除了第一个孩子之外，因为它之前没有任何元素。

当然也可以使用general sibling selector *

~

查看下面的演示：

＆＃13;

＆＃13;

$('#abcd > * ~ *').remove();

＆＃13;

$('#abcd > * + *').remove();

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以这样做：

$('#abcd .myclass').not(':first').remove();

<强> DEMO

<强>参考

.not()

:first

Answer 4

适合OP问题的另一个不同答案

$("#abcd .myclass").not(":eq(0)").remove();

或

$("#abcd .myclass").not(":lt(1)").remove();

或

$("#abcd .myclass").not(":first").remove();

或

$("#abcd").find(".myclass:not(:contains('Hello'))").remove();

或

$("#abcd .myclass").not(":nth-child(1)").remove();

或

$("#abcd .myclass").not(":nth-of-type(1)").remove();

或

$("#abcd .myclass").nextAll().remove();

或

$("#abcd .myclass").nextUntil().remove();

Fiddle

Answer 5

尝试

$( "div div:first-child" ).nextAll().remove();

Answer 6

像这样：

$("#abcd > div:not(:first)").remove();

http://jsfiddle.net/dqazuyx3/1/

Answer 7

尝试.filter(fn)：

$('#abcd div').filter(function(){
    return this.textContent !== "Hello"
}).remove();

Fiddle

---

根据 skobaljic 的评论更新：

$('#abcd div').filter(function () {
    return $(this).index() !== 0
}).remove();

以上代码剪切会删除问题中除<1> 必需之外的所有div。

Updated Fiddle.

---

.filter()允许您根据不同的属性返回选择器，因此在这种情况下，我们使用.text()＆amp; .index()。所以它将返回所有不包含 Hello 文本的div，只需将其与.remove()方法链接即可删除。