Jquery .empty()前2个元素

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()

将“返回”：

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

如何使其“返回”，例如(在本例中，最后四个是“空的”)

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

Answer 1

如果您想要删除的元素总是(一组)元素，如您的示例中所示，只需使用slice来标识要删除的子元素，并使用remove删除它们。(在下面，我将忽略要删除I的事实，因为这显然只是为了说明。)

移除前四项：

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

示例：

​

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

<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>

​

删除最后四个：

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

示例：

​

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

<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>

​

Answer 2

您可以使用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 3

​

//$('#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()

说明:在匹配的集合中，选择索引大于索引的所有元素。

用移除()

描述:从DOM中移除匹配的元素集。