使用JQuery從容器末端刪除項目

Question

我有一個使用prepend方法進入列表的項目源。我一直在尋找，但無法找到一種方法從結尾刪除X個項目 - 以防止溢出。

如何使用jquery從此列表中刪除最後3個元素？

<div id="feed"> 
<ul> 
<li class="item"></li> 
<li class="item"></li> 
<li class="item"></li> 
<li class="item"></li> 
<li class="item"></li> 
<li class="item"></li> 
</ul> 
</div> 

Answer 1

您可以使用.slice() method從jQuery對象中刪除最後三個要素：

$('#feed li').slice(-3).remove(); 

段：

$('#feed li').slice(-3).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="feed"> 
 
    <ul> 
 
    <li class="item">1</li> 
 
    <li class="item">2</li> 
 
    <li class="item">3</li> 
 
    <li class="item">4</li> 
 
    <li class="item">5</li> 
 
    <li class="item">6</li> 
 
    </ul> 
 
</div>

---

或者，您也可以使用jQuery :gt() selector併爲索引指定負數。請記住，該選擇器的索引是從零開始的，這意味着-4將用於刪除最後三個元素。

$('#feed li:gt(-4)').remove(); 

段：

$('#feed li:gt(-4)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="feed"> 
 
    <ul> 
 
    <li class="item">1</li> 
 
    <li class="item">2</li> 
 
    <li class="item">3</li> 
 
    <li class="item">4</li> 
 
    <li class="item">5</li> 
 
    <li class="item">6</li> 
 
    </ul> 
 
</div>