Can't delete multiple rows at a time in datatable

Question

I am unable to delete multiple rows that are selected using checkboxes. When I select the rows and click the delete button the first row that is selected gets deleted, but the other rows are not deleted.

I want to delete multiple rows at a time. I'm new to datatables. How can I do it?

$(document).ready(function() {
  var t = $('#table').DataTable();
  $('#add').on('click', () => {
    $("#popup").dialog({
      width: 400,
      modal: true,
      resizeable: false,
      buttons: {
        "Submit": function() {
          t.row.add([
            '<input type="checkbox" class="select">',
            $('#name').val(),
            $("#age").val(),
            '<button type="button"  class="edit" >Edit</button>'
          ]).draw(false);
          $(this).dialog("close");
        }
      }
    });
  })
  
  $("#delete").on("click", function() {
    //$('table tr').has('input:checked').remove();
    t.row($('table tr').has('input:checked'))
      .remove()
      .draw();
  })
  
  $('#deleteall').on('click', function() {
    //t.$('tbody tr').remove();
    t.clear().draw();
  })
  
  $('tbody').on('click', ".edit", (event) => {
    $("#popup").dialog({
      width: 400,
      modal: true,
      resizeable: false,
      buttons: {
        "Submit": function() {
          var name = '<tr><td><input type="checkbox" class="select"></td><td>' +
            $('#name').val() + '</td><td>' +
            $("#age").val() +
            '</td><td>' +
            '<button type="button"  class="edit" >Edit</button>' +
            '</td></tr>';
          t.row($(event.currentTarget).parents('tr'))
            .remove()
            .draw();
          t.row.add([
            '<input type="checkbox" class="select">',
            $('#name').val(),
            $("#age").val(),
            '<button type="button"  class="edit" >Edit</button>'
          ]).draw();
          //console.log($('tr'));
          $('.add-input').val('');
          $(this).dialog("close");
        }
      }
    })
  })
})

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="tab-mod.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="table-wrap">
  <table id="table" border="1">
    <thead>
      <tr>
        <th>Select</th>
        <th>Name</th>
        <th>Age</th>
        <th>Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>Sakthi</td>
        <td>20</td>
        <td><button type="button" class="edit">Edit</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>Prabhu</td>
        <td>21</td>
        <td><button type="button" class="edit">Edit</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>Sakthi</td>
        <td>20</td>
        <td><button type="button" class="edit">Edit</button></td>
      </tr>

    </tbody>
  </table>
</div>
<div class="op">
  <button type="button" class="mod" id="add">Add</button>
  <button type="button" class="mod" id="delete">Delete</button>
  <button type="button" class="mod" id="deleteall">Delete All</button>

</div>
<div class="popup" id="popup" style="display:none;">
  <input type="text" placeholder="Name" class="add-input" id="name">
  <input type="number" placeholder="Age" class="add-input" id="age">
</div>

Answer 1

The issue is because table.row() can only retrieve a single row at a time. Providing it multiple rows will mean only the first one is selected.

To fix this simply use rows() instead, as it accepts multiple rows as an argument:

$("#delete").on("click", function() {
  t.rows($('table tr').has('input:checked')).remove().draw();
})

$(document).ready(function() {
  var t = $('#table').DataTable();
  $('#add').on('click', () => {
    $("#popup").dialog({
      width: 400,
      modal: true,
      resizeable: false,
      buttons: {
        "Submit": function() {
          t.row.add([
            '<input type="checkbox" class="select">',
            $('#name').val(),
            $("#age").val(),
            '<button type="button"  class="edit" >Edit</button>'
          ]).draw(false);
          $(this).dialog("close");
        }
      }
    });
  })

  $("#delete").on("click", function() {
    t.rows($('table tr').has('input:checked')).remove().draw();
  })

  $('#deleteall').on('click', function() {
    //t.$('tbody tr').remove();
    t.clear().draw();
  })

  $('tbody').on('click', ".edit", (event) => {
    $("#popup").dialog({
      width: 400,
      modal: true,
      resizeable: false,
      buttons: {
        "Submit": function() {
          var name = '<tr><td><input type="checkbox" class="select"></td><td>' +
            $('#name').val() + '</td><td>' +
            $("#age").val() +
            '</td><td>' +
            '<button type="button"  class="edit" >Edit</button>' +
            '</td></tr>';
          t.row($(event.currentTarget).parents('tr'))
            .remove()
            .draw();
          t.row.add([
            '<input type="checkbox" class="select">',
            $('#name').val(),
            $("#age").val(),
            '<button type="button"  class="edit" >Edit</button>'
          ]).draw();
          //console.log($('tr'));
          $('.add-input').val('');
          $(this).dialog("close");
        }
      }
    })
  })
})

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="tab-mod.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="table-wrap">
  <table id="table" border="1">
    <thead>
      <tr>
        <th>Select</th>
        <th>Name</th>
        <th>Age</th>
        <th>Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>Sakthi</td>
        <td>20</td>
        <td><button type="button" class="edit">Edit</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>Prabhu</td>
        <td>21</td>
        <td><button type="button" class="edit">Edit</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>Sakthi</td>
        <td>20</td>
        <td><button type="button" class="edit">Edit</button></td>
      </tr>
    </tbody>
  </table>
</div>
<div class="op">
  <button type="button" class="mod" id="add">Add</button>
  <button type="button" class="mod" id="delete">Delete</button>
  <button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
  <input type="text" placeholder="Name" class="add-input" id="name">
  <input type="number" placeholder="Age" class="add-input" id="age">
</div>