javascript - jQuery not deleting record from table

Question

I want to create a new function that when I press a little trashcan icon, a record in MYSQL will be deleted.

The following is my js code：</p>

        $("table").find("img[class='icon_garbage']").click(function(){

            var delnum = $(this).parents("tr").find("td[class='so']").text();
            var string='delete_num='+delnum;

            $.ajax({
                url:"../src/delete.php",
                type:"post",
                data:string,
                success: function(){
                  var tr = $(this).parents("tr");
                  tr.fadeOut('slow', function(){
                     $(this).remove();
                   });
                }

        })
    });

and it's not working.

the record do delete, but the record does't fadeout.

but if I fix the code as following:

        $("table").find("img[class='icon_garbage']").click(function(){

            var delnum = $(this).parents("tr").find("td[class='so']").text();
            var string='delete_num='+delnum;
            var tr = $(this).parents("tr");
                   tr.fadeOut('slow', function(){
                      $(this).remove();
                   });


            $.ajax({
                url:"../src/delete.php",
                type:"post",
                data:string,
                success: function(){
     //              var tr = $(this).parents("tr");
     //              tr.fadeOut('slow', function(){
     //                 $(this).remove();
    //               });
                }

        })
    });

and it's will working ......

I don't know why , can somebody tell me ?

My OS is MAC OSX 10.8.5,and I use MacVim to be my editor.

Answer 1

Set the context in the ajax call to this. Without setting the context, this does not refer to your element in the success event.

$.ajax({
    url:"../src/delete.php",
    type:"post",
    data:string,
    context: this, // <----------------- here
    success: function(){
      var tr = $(this).parents("tr");
      tr.fadeOut('slow', function(){
         $(this).remove();
       });
    }
});