jQuery remove elements by condition

Question

Hello. I have some tr elements in table:

<table>
<tr id="tr_level_1">...</tr>
<tr id="tr_level_2">...</tr>
<tr id="tr_level_3">...</tr>
<tr id="tr_level_4">...</tr>
<tr id="tr_level_5">...</tr>
</table>

In Javascript I have the next variable:

var levels = 3;

I want to delete all tr's where number in id is more than levels. And if levels is more than number of tr's - adding tr's after last.

Thanls a lot.

Answer 1

Working demo

Try this:

var levels = 3;
$("table tr:gt("+(levels-1)+")").remove();

I substract one because this expression ("gt": greater than) is 0-based index.

For the second part of your question try this:

http://www.jsfiddle.net/dactivo/fADHL/

if($("table tr").length<levels){
 //the code here for less than levels
}
else
{
 $("table tr:gt("+(levels-1)+")").remove();    
}

Answer 2

try this

var total = $("#table").find('tr').length;
var levels = 3;
if(levels<=total) {
   for(levels=levels;levels<=total;levels++) {
       $("#tr_level_"+levels).remove();
   }
}
else {
   $("#table").append("<tr id=\"tr_level_"+total+1+"\">..</tr>");
   // this will add the element with tr_level_6 at the end 

}

Answer 3

var levels = 5;
var lastTr = $('#ranks_percentages tr:last').attr('id');
lastTr = lastTr.split('_');
var lastLevel = lastTr[1];
if (levels < lastLevel) {
   //removing
} else {
   //adding 
}

Answer 4

Maybe this:

function editTr(inVal) {
selector = new RegExp("\d")
var lastID = selector.exec($("table tr").last().attr("id"));
if (lastID > inVal) {
    $("table tr").each(function () {
        if (selector.exec($(this).attr("id")) > inVal) {
            $(this).remove();
        }
    });
}
else if (lastID < inVal) {
    for (x=lastID;x<=inVal;x++) {
        $("table").append("<tr id=\"tr_level_"+x+"\"></tr>")
    }
}
else {
    return null
}

}

Answer 5

I think this should complete the answer

var levels = 3;
var $trs = $("table tr");
var currentLevels = $trs.length;
if (currentLevels > levels) {
    $trs.filter(":gt(" + (levels - 1) + ")").remove();
} else if (currentLevels < levels) {
    var t = "";
    for (i = (currentLevels + 1); i <= levels; i++) {
        t += '<tr id="tr_level_' + i + '"><td>' + i + '</td></tr>';
    }
    $trs.parent().after(t);
}

http://jsfiddle.net/c6XWN/1/ <-- levels = 10

http://jsfiddle.net/c6XWN/2/ <-- levels = 5

http://jsfiddle.net/c6XWN/3/ <-- levels = 3

Good luck!