Question

jquery方法.empty()删除元素的所有子节点。如何指定使用.empty()删除前2-3个元素或最后2-3个元素？

文档：

此方法不仅删除子（和其他后代）元素，但也是匹配元素集中的任何文本。

示例：

<div id="foo">
   <div id="one"></div>
   <div id="two"></div>
   <div id="three"></div>
   <div id="four"></div>
   <div id="five"></div>
   <div id="six"></div>
</div>

$('#foo').empty()

将＆＃34;返回＆＃34;：

<div id="foo"></div>

如何制作＆＃34;返回＆＃34;例如（在这种情况下，最后四个是＆＃34;清空＆＃34;）

<div id="foo">
   <div id="one"></div>
   <div id="two"></div>
</div>

Answer 1

您可以使用slice()或:gt()从集合中获取所需的元素，然后remove()。试试这个：

$('#foo div').slice(2).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
   <div id="one">one</div>
   <div id="two">two</div>
   <div id="three">three</div>
   <div id="four">four</div>
   <div id="five">five</div>
   <div id="six">six</div>
</div>

Answer 2

//$('#foo div:gt(1)').empty();
$('#foo div:gt(1)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
   <div id="one">1</div>
   <div id="two">2</div>
   <div id="three">3</div>
   <div id="four">4</div>
   <div id="five">5</div>
   <div id="six">6</div>
</div>

使用:gt()

描述：选择匹配集中索引大于索引的所有元素。

remove()

描述：从DOM中删除匹配元素集。

Answer 3

如果要删除的内容总是一组（一组）元素，就像在您的示例中一样，只需使用slice标识要删除的子项，并使用remove删除它们。（在下面，我将忽略您要删除的ID具有ID的事实，因为这只是为了说明。）

删除前四个：

$("#foo").children().slice(0, 4).remove();

示例：

＆＃13;

$("#foo").children().slice(0, 4).remove();

＆＃13;

<div id="foo">
   <div id="one">one</div>
   <div id="two">two</div>
   <div id="three">three</div>
   <div id="four">four</div>
   <div id="five">five</div>
   <div id="six">six</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

删除最后四个：

$("#foo").children().slice(-4).remove();

示例：

＆＃13;

$("#foo").children().slice(-4).remove();

＆＃13;

<div id="foo">
   <div id="one">one</div>
   <div id="two">two</div>
   <div id="three">three</div>
   <div id="four">four</div>
   <div id="five">five</div>
   <div id="six">six</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Jquery .empty（）前2个元素

3 个答案:

删除前四个：

删除最后四个：