Remove a table row after ajax success

Question

I am trying to remove a table row with fadeOut effect after a successful ajax call.

I tried it something like this, but it is not working.

//##### Send delete Ajax request to process.php #########
$("body").on("click", "#response table td a.del_button", function(e) {
    e.returnValue = false;
    var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
    var DbNumberID = clickedID[1]; //and get number from array
    var myData = 'recordToDelete='+ DbNumberID; //build a post data structure   
    //console.log(myData); 

    $("#delete_this_user").dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
         "Yes": function() {
            //$row.remove();
            $(this).dialog( "close" );

                $.ajax({
                    type: "POST", // HTTP method POST or GET
                    url: "process.php", //Where to make Ajax calls
                    dataType:"text", // Data type, HTML, json etc.
                    data:myData, //Form variables
                    success:function(response){
                        //on success, hide  element user wants to delete.
                        $(this).closest('tr').find('td').fadeOut(1000,function(){ 
                            $(this).parents('tr:first').remove();                    
                        }); 
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        //On error, we alert user
                        alert(thrownError);
                    }
                });
         },
         "no": function() {
            $(this).dialog( "close" );
         }
      }
   });      


});

UPDATE - structure of my table row

 <tr>
  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;sdfsf</td>
  <td>sdfds</td>
  <td>fdsfs</td>
  <td><a href='#' id='edit-82' class='edit_button'><span class='edit_ico'></span></a></td>
  <td><a href='#' id='delete-82' class='del_button'><span class='delete_ico'></span></a></td>
 </tr>

Can anybody tell how can I do this?

Answer 1

In this case we can create a closure variable to hold the reference to the row to be deleted

$("body").on("click", "#response table td a.del_button", function(e) {
    e.returnValue = false;
    var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
    var DbNumberID = clickedID[1]; //and get number from array
    var myData = 'recordToDelete='+ DbNumberID; //build a post data structure   
    //console.log(myData); 

    var $tr = $(this).closest('tr'); //here we hold a reference to the clicked tr which will be later used to delete the row

    $("#delete_this_user").dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Yes": function() {
                //$row.remove();
                $(this).dialog( "close" );

                $.ajax({
                    type: "POST", // HTTP method POST or GET
                    url: "process.php", //Where to make Ajax calls
                    dataType:"text", // Data type, HTML, json etc.
                    data:myData, //Form variables
                    success:function(response){
                        //on success, hide  element user wants to delete.
                        $tr.find('td').fadeOut(1000,function(){ 
                            $tr.remove();                    
                        }); 
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        //On error, we alert user
                        alert(thrownError);
                    }
                });
            },
            "no": function() {
                $(this).dialog( "close" );
            }
        }
    });      


});