How to remove all table row below particular table row in jQuery

  • A+
Category:Languages

This is my table :

<table>     <tbody>         <tr>             <td>1</td>         </tr>         <tr>             <td>2</td>         </tr>         <tr>             <td class="removeFromHere">remove all below tr</td>         </tr>         <tr>             <td>remove 1</td>         </tr>         <tr>             <td>remove  2</td>         </tr>         <tr>             <td>remove 3</td>         </tr>         <tr>             <td>remove 4</td>         </tr>     </tbody> </table> 

I want to remove all the table rows below the following table row

 <td class="removeFromHere">remove all below tr</td> 

what is the best way to do this

I can remove one tr like the following :

$('.removeFromHere').parent().remove(); 

But it will only remove the following :

 <td class="removeFromHere">remove all below tr</td> 

How can I remove all the tr below the particular tr.

 


You can use nextAll() for that result.

  1. You first need to get the <tr> element in which there is the element with class removeFromHere
  2. Then you can use nextAll() to remove all the <tr> elements those are next to it.
$('.removeFromHere').closest('tr').nextAll('tr').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table>   <tbody>     <tr>       <td>1</td>     </tr>     <tr>       <td>2</td>     </tr>     <tr>       <td class="removeFromHere">remove all below tr</td>     </tr>     <tr>       <td>remove 1</td>     </tr>     <tr>       <td>remove 2</td>     </tr>     <tr>       <td>remove 3</td>     </tr>     <tr>       <td>remove 4</td>     </tr>   </tbody> </table>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: