CODEWITHSUNDEEP
javascriptjqueryhtml
user2121793
user2121793

Reputation: 31

Trying to delete all li in an ul where the li id Greater than

I'm trying to delete all <li> inside a <ul> where the id is greater than a number.

It should remove the <li> with the id 6 to 4 

$('.row-fruit').filter(function (i) {
  return this.id > 3;
}).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="myFruits">
   <li class="row-fruit" id="1">mango</li>
   <li class="row-fruit" id="2">tomato</li>
   <li class="row-fruit" id="3">banana</li>
   <li class="row-fruit" id="4">watermelon</li>
   <li class="row-fruit" id="5">apple</li>
   <li class="row-fruit" id="6">lemon</li>
</ul>

Upvotes: 2

Views: 55

Answers (2)

adeneo
adeneo

Reputation: 318182

An ID that starts with a number is generally not a very good idea, had you been using characters for ID's and just filtered with something like gt() instead, you wouldn't have this problem to begin with

$('.row-fruit:gt(2)').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myFruits">
   <li class="row-fruit" id="a1">mango</li>
   <li class="row-fruit" id="a2">tomato</li>
   <li class="row-fruit" id="a3">banana</li>
   <li class="row-fruit" id="a4">watermelon</li>
   <li class="row-fruit" id="a5">apple</li>
   <li class="row-fruit" id="a6">lemon</li>
  </ul>

Upvotes: 2

ziggy wiggy
ziggy wiggy

Reputation: 1067

While your code example works as is, you should convert the ID to a number from a string so that it will continue to work as expected for numbers with more than one digit.

$('.row-fruit').filter(function(i) {

   return (parseInt(this.id, 10) > 3);

 }).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul id="myFruits">
   <li class="row-fruit" id="1">mango</li>
   <li class="row-fruit" id="2">tomato</li>
   <li class="row-fruit" id="3">banana</li>
   <li class="row-fruit" id="4">watermelon</li>
   <li class="row-fruit" id="5">apple</li>
   <li class="row-fruit" id="6">lemon</li>
  </ul>

Here I used parseInt to perform the conversion to number.

And here's a non-jQuery version:

Array.from(document.querySelectorAll('.row-fruit'))
  .filter(el => parseInt(el.id, 10) > 3)
  .forEach(el => el.remove());
<ul id="myFruits">
  <li class="row-fruit" id="1">mango</li>
  <li class="row-fruit" id="2">tomato</li>
  <li class="row-fruit" id="3">banana</li>
  <li class="row-fruit" id="4">watermelon</li>
  <li class="row-fruit" id="5">apple</li>
  <li class="row-fruit" id="6">lemon</li>
</ul>

Upvotes: 2

Related Questions