Removing items from the end of a container using jQuery

Question

I have a feed of items on a list using the prepend method. I searched, but cannot find, a method to remove the X number of elements from the end - to prevent it from overflowing.

How to remove the last 3 items from this list using jquery?

<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

You can use the method .slice()to remove the last three elements from a jQuery object:

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

Excerpt:

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

Run codeHide result

---

jQuery :gt() . , , , -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>

Hide result