Remove children element jquery

Question

I have a list children element about >50 value:

<div class="parent">
   <div class="children"></div>
   <div class="children"></div>
   ...
   <div class="children"></div>
</div>

Now, I want to remove children eq from 1 to 30. Can you help me anyway to solve this problem quickly? Thank you very much.

Answer 1

You can try with jQuery's :lt() selector:

Select all elements at an index less than index within the matched set.

$('.parent > .children:lt(30)').remove(); //Remove the first 30

Demo:

 $('.parent >.children:lt(2)').remove(); // Remove the first 2

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="children">1</div> <div class="children">2</div> <div class="children">3</div> </div>

Answer 2

In pure javascript, you have to use loop:

 var c = document.querySelectorAll(".children"); c.forEach(function (v,i){ if(i<2){ document.body.removeChild(v); } });

 <div class="children">1</div> <div class="children">2</div> <div class="children">3</div>

That's why it is better to use jQuery because you save many lines of code.