Not able to delete remove a row after a successful Ajax Call

zohaibhassan122

Hey Lovely people,
I am trying to remove a row after an ajax call. I want to remove row if the response code from ajax call is in code 201.
Below is my code. If I put the table.row( $(this).closest('tr') ).remove().draw(); outside ajax call, it works but I want to delete row if the response code is 201. I have put message in console.log and that msg works fine but deleting row does not work.

Below is my code and thanks in advance

$('#example').on('click', 'tbody .edit_btn', function () {
        var data_row = table.row($(this).closest('tr')).data();
         var RowDataArray =
     [
         table.cell( table.row($(this).closest('tr')).index(),1 ).data(),
         table.cell( table.row($(this).closest('tr')).index(),4 ).nodes().to$().find('input').val(),
         table.cell( table.row($(this).closest('tr')).index(),5 ).nodes().to$().find('input:checked').val()?1:0,
       ];
        console.log(RowDataArray);
         $.ajax({
        url: "https://reqres.in/api/users",
        type: "POST",
        dataSrc: RowDataArray,
    
    complete: function(e, xhr, settings){
 if(e.status === 201){
           table.row( $(this).closest('tr') ).remove().draw();
       console.log(' Payload Successfully sent');
    }
   else{~~~~
 console.log('Failed');
    }
}
      });
    

EDIT: Updated using Markdown Code Formatting.

kthorngren

My guess is that inside the complete function this references something else not the clicked button. I would create a variable for the row then reference that in the complete function. Maybe something like this would work:

$('#example').on('click', 'tbody .edit_btn', function () {
        var row = table.row($(this).closest('tr'));
        var data_row = row.data();

And

 if(e.status === 201){
           row.remove().draw();
       console.log(' Payload Successfully sent');
    }

You might be able to optimize your code by making these changes:

     [
         table.cell( row.index(),1 ).data(),
         table.cell( row.index(),4 ).nodes().to$().find('input').val(),
         table.cell( row.index(),5 ).nodes().to$().find('input:checked').val()?1:0,
       ];

Kevin

zohaibhassan122

Thanks a lot Kevin, You have saved my life. . This works perfect for me