Question

我有一个div结构

<div class="parent">
    <div class="child_item">Data </div>
    <div class="child_item">Data </div>
    <div class="child_item">Data </div>
</div>

我jquery如何删除类“Parent”的所有子节点而只留下一个？

结果DOM将是一个孩子的父母。

<div class="parent">
    <div class="child_item">Data </div>
</div>

编辑：

$('.parent .child_item').not(':first').remove()

这只删除一个div调用的第一个子节点。如果我有很多父div，如

，该怎么办？

<div class="parent">
    <div class="child_item">Data A</div>
    <div class="child_item">Data B</div>
    <div class="child_item">Data C</div>
</div>
<div class="parent">
    <div class="child_item">Data A</div>
    <div class="child_item">Data B</div>
    <div class="child_item">Data C</div>
</div> ........

结果应该是这个。

<div class="parent">
        <div class="child_item">Data A</div>
    </div>
<div class="parent">
        <div class="child_item">Data A</div>
    </div>

Answer 1

$('.parent .child_item').not(':first').remove()

Answer 2

  $(".parent .child_item").not(':eq(0)').remove();
    //or
    $('.parent .child_item').not(':first').remove();

参考 :eq() 和 :first

Answer 3

你可以这样做：

$('.parent > .child_item:not(:first)').remove();

这将删除除第一个之外的所有子元素。

Fiddle Demo

Answer 4

$('.parent').each(function (index){
    $(this).find('.child_item').not(':eq(0)').remove();
});

除了第一个孩子之外，这将从父母中删除所有孩子。

Jquery删除Element的子项而不删除一个

4 个答案: