Delete rows from table recursively using JQ

Question

I want to write a recursive function that will delete rows from my table.

I have the number of rows to keep and after that number i want to remove all rows.

for example: I have the number 5 so the first 5 rows need to stay and the rest need to go. (using the row id)

code:

<table id="table">
<tr id="tr1"/>
<tr id="tr2"/>
<tr id="tr3"/>
<tr id="tr4"/>
<tr id="tr5"/>
<tr id="tr6"/>
<tr id="tr7"/>
<tr id="tr8"/>
</table>

I dont know how much rows i will have, thats why i think i need a recursive solution.

Answer 1

You can use several different jQuery filter approaches:

var numRows=5;
$('#table tr').slice(numRows).remove();

OR

$('#table tr:gt(' + (numRows-1) + ')').remove();

DEMO

References:

slice() docs

:gt() selector docs

Answer 2

You can use this

$(document).ready(function(){
var deleteAfter =  5
$.each($("#table tr"),function(key,value){
    //do your conditional here
    if(key > deleteAfter-1){
        value.remove();
    }
});

alert("now the table row is "+$("#table tr").length);

});

This is working jsfiddle

I'm sorry if u want to using id as the input please use this instead

$(document).ready(function () {
    //define the id first
    var deleteAfter = $("#tr5");
    var elementNo;

$.each($("#table tr"), function (key, value) {
    if (this.id == deleteAfter.attr("id")){
        elementNo = key;
    }
});

$.each($("#table tr"), function (key, value) {
    //do your conditional here
    if (key > elementNo) {
        value.remove();
    }
});

alert("now the table row is " + $("#table tr").length);
});

And i updated the jsfiddle