remove multiples rows from datatable based on their respective indexes in jquery

Question

I want to remove some rows from datatable based on their respective indexes.The indexes are in form of an array. Upon clicking a button the function gets the array and finds each of them in the datatable then remove them .I have been able to create the code and its able to execute perfectly.Now the issue is not all the rows are removed,lets say we have 5 rows that we want to remove only 2 rows are removed.How can i remove all the rows in the table with all the respective indexes.This is my code

var productsIds=['2','3','4','5','6']
var productsTable=$('#productsTable').DataTable()

productsIds.forEach(function(id) {
    var columnIndex = 0;
    var rowIndex = productsTable.column(columnIndex).data().indexOf(id);
    productsTable.row(rowIndex).remove();
});

productsTable.draw();

Answer 1

Remove rows in reverse order to avoid index-shifting issues or Use a different approach that avoids modifying the table while iterating through it Reverse the productsIds array This ensures that when rows are removed the indexes of the rows that are yet to be removed are not affected Check if rowIndex is valid Before attempting to remove a row make sure that rowIndex is not -1, which indicates that the row with the given ID was not found Alternatively, you can collect the rows to be removed first and then remove them in a separate loop:

Collect indexes first Store the indexes of the rows to be removed in an array. Sort and remove Sort the array in descending order to remove rows from the end of the table first, thus avoiding index-shifting issues Remove rows Iterate through the sorted array to remove the rows Using either approach will ensure that all specified rows are correctly removed from the DataTable