JSFiddle - React, Tailwind, and code Playground

HTML

<table id="example" class="display" cellspacing="0" width="100%">
       <thead>
         <tr>
           <th>Name</th>
           <th>Position</th>
           <th>Office</th>
           <th>Salary</th>
         </tr>
       </thead>
       <tbody>
         <tr id="tr_12345">
           <td>Tiger Nixon</td>
           <td>System Architect</td>
           <td>Edinburgh</td>
           <td>$320,800</td>
         </tr>
         <tr id="tr_23456">
           <td>Garrett Winters</td>
           <td>Accountant</td>
           <td>Tokyo</td>
           <td>$170,750</td>
         </tr>
         <tr id="tr_76543">
           <td>Ashton Cox</td>
           <td>Junior Technical Author</td>
           <td>San Francisco</td>
           <td>$86,000</td>
         </tr>
         <tr id="tr_234567">
           <td>Cedric Kelly</td>
           <td>Senior Javascript Developer</td>
           <td>Edinburgh</td>
           <td>$433,060</td>
         </tr>
       </tbody>
     </table>

JavaScript

$('#example').DataTable({
  select: {
    style: 'os'
  },
  dom: 'Bftpli',
  pagingType: "numbers",
  order: [2, "asc"],
  buttons: [{
    text: 'Delete',
    action: function(e, dt, node, config) {
      let rows = dt.rows('.selected');
      rows.every(function(rowIdx, tableLoop, rowLoop) {
        let bNumber = this.node().id.slice(3) //row id is "tr_0012345", so slice first 3 chars
        htmx.ajax('DELETE', '/bnumber/' + bNumber, {
          target: '#' + this.node().id, //htmx target is #tr_012345
          swap: 'outerHTML' //htmx replaces the whole tr element with a new from server
        })
      });
    }
  }]
});

document.body.addEventListener('htmx:afterSwap', function(event) {
  if (event.srcElement.localName == 'tr') {
    //once htmx has replaced a tr element in the dom, invalidate and redraw table
    $('#maintable').DataTable().rows().invalidate('dom').draw();
    console.log("datatable invalidate and draw")
  }
});