How to remove all li elements inside an ul except the first and the last elements using jQuery?

Question

I have a <ul> element. How can remove all the <li> elements inside it, except for the first and the last, using jQuery?

Answer 1

To remove from all ul-s on the page the li-s that are neither the first nor the last:

$('ul li:not(:first-child):not(:last-child)').remove();

Or using a specific id:

$('#yourul li:not(:first-child):not(:last-child)').remove();

If you have a jQuery object with your ul in it:

$(yourul).find('li:not(:first-child):not(:last-child)').remove();

Answer 2

Have you tried selecting all the list elements, and then removing the first and last ones from the list?

$('ul li').not('li:first, li:last').remove()

Answer 3

$('ul li').not('li:first, li:last').remove(); 

This will remove all items from list Except/Exclude first and last element,

---

To remove all items from any list

$('#yourulid li').remove();  //remove all li items from list named/id #yourulid

Answer 4

$("ul li:not(:first-child):not(:last-child)").remove();

Answer 5

Here's a way to do it using slice

$("#removeAllButFirstAndLast").click(function() {
  $("#myUL").children().slice(1, -1).remove()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUL">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

<div id="removeAllButFirstAndLast">click to remove all but first and last</div>