jquery - ajax成功后删除表格行

Question

我试图在成功的 ajax 调用后删除具有淡出效果的表行。

我尝试过类似的方法，但它不起作用。

//##### 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" );
         }
      }
   });      


});

更新 - 我的表格行的结构

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

有人能告诉我该怎么做吗？

Answer 1

在这种情况下，我们可以创建一个闭包变量来保存对要删除的行的引用

$("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" );
            }
        }
    });      


});