jquery - ajax 成功後にテーブル行を削除する

Question

ajax 呼び出しが成功した後、fadeOut 効果でテーブル行を削除しようとしています。

このようなことを試してみましたが、うまくいきません。

//##### 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 - テーブル行の構造

 <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>

どうすればこれを行うことができますか？