Vishaal M Vishaal M - 1 month ago 8
Javascript Question

Dynamically add & remove rows

I have 2 different table in same page. 2 table having functionality that dynamically add & remove rows.

When i remove dynamically added row from 2nd table it affects table 1.

sr. no
column in 2nd table, when i remove row from 2nd table it shows the
sr. nos
in 1st table. But there is no sr no column in table first.

$(document).on('click', '.del', function() {
var index = $(this).closest('tr').index();
$(this).parent().parent().remove();
for(var i=index; i<$('table tbody tr').children().length; i++){

$('table tbody tr:nth-child(' + i + ') td:first-child').text(i);
}
// more code in fiddle
});


see this fiddle

Answer Source

Use below code

$('#potable tbody tr:nth-child(' + i + ') td:first-child').text(i); //change

Instead of below

$('table tbody tr:nth-child(' + i + ') td:first-child').text(i);

Reason why your code was not working is because you are relying on selector 'table' and for both the table it is true and you are checking first child so its affecting first child i.e child of first table, If you rely on specific ID '#potable' it will affect only second table nth-child(x) will bring xth child of second table.