Datatables.net deleted rows reappear after new row is added

A frustrating issue!

The problem you're experiencing is likely due to the way DataTables handles row deletion and reordering. When you delete a row, DataTables doesn't actually remove the row from the underlying data source (e.g., an array or a database). Instead, it marks the row as deleted and keeps track of the deleted rows in a separate array.

When you add a new row, DataTables re-renders the table and re-applies the row data. If the deleted rows are still present in the data source, they will re-appear in the table.

To fix this issue, you need to remove the deleted rows from the data source before adding a new row. Here are a few approaches:

1. Use the fnDrawCallback function: You can use the fnDrawCallback function to remove deleted rows from the data source after each draw operation. This function is called after each draw operation, so you can use it to clean up deleted rows.

   $('#myTable').DataTable().on('draw', function() {
   var table = $('#myTable').DataTable();
   table.rows().remove().draw();
   });

2. Use the fnRowRemoved function: If you're using a custom row removal function, you can use the fnRowRemoved function to remove the deleted row from the data source.

   $('#myTable').DataTable().on('rowRemoved', function(e, row) {
   var table = $('#myTable').DataTable();
   table.rows().remove().draw();
   });

3. Use the destroy method: If you're using a custom data source, you can use the destroy method to remove deleted rows from the data source.

   $('#myTable').DataTable().destroy();

4. Use a custom data source: If you're using a custom data source, you can implement a custom data source that removes deleted rows automatically.

Remember to adjust the code according to your specific use case and data source.

I hope this helps you resolve the issue!