Error/bug removing table row using jQuery-CodePudding

I'm using a jQuery datatable with an action button setting at the last column. The action buttons are Add and Delete row. The traditional way of removing table row using jQuery is no doubt the remove method. Great its working.

$(this).closest('tr').remove();

Adding new row to datatable has multiple option and my case was straight forward.

var table = $('#example').DataTable();
table.row.add( [input01,input02,buttons] ).draw( false );

//input01, input02, buttons (Add and Delete) are standard html element

Now the issue comes when adding a new row the deleted rows will also appear.

Tried the using empty method but it's only deleting the table cell inside the triggered table row.

CodePudding user response：

This is because when you use $(this).closest('tr').remove();, the row is removed from the DOM but not removed from the DataTable instance. So it will reappear on your next .draw().

To actually remove it from the DOM and the DataTable instance, you should instead use this

table.row( $(this).closest('tr') ).remove().draw(false);