Removing Rows From DataTables From A Ajax Call

I have a DataTables (datatables.net) table setup which have a custom column where I have icons for different kind of actions. One of these actions is deletion and I don't want to

Solution 1:

Maybe it's too late, but I will put it anyway. After two days of searching all over the web, I find a simple solution without any DataTable functions

<td>
 <button type="button" id="{{$lead->id}}"  name="{{$lead->id}}" onclick="deleteRecord(this.id,this)" data-token="{{ csrf_token() }}">Delete</button>
 </td>

this cell above has an onclick function that takes 2 parameters, the first one (this.id) is the id of the button (that comes from the DB, and will be passed to ajax to update the DB), and the second one (this) which is the index of the button itself (later we will extract the index of the row from it)

function deleteRecord(mech_id,row_index) {
$.ajax({
        url:"{{action('MechanicController@destroy')}}",
        type: 'get',
        data: {
              "id": mech_id,
              "_token": token,
              },
        success: function ()
             {
              var i = row_index.parentNode.parentNode.rowIndex;
              document.getElementById("table1").deleteRow(i);
            }
     });  
}

Now in the success function, I have used 2 lines: the first one is to extract the row index from the button (2 parents because we have to pass from the parent of the button, in this case , and then the parent of the which is the row)

the second line is a simple delete row of our index from table1 which is the name of my table