Question

I have a dashboard in my website which contain some entries in table, each entry in the table have a delete button. When user click over the delete button a Ajax call happens and I am deleting that entry in the callback function. My code :

$(".del").live({
    click: function () {
        $.post("/Home/DeleteTemplate", {
            name: $(this).parent().siblings("td:first").children("a").html()
        }, function (data) {
            $(this).parents("tr").remove(); //Inside the callback
        });
    }
});

Now my problem is that if I was deleting the row in the callback function the row was not removed from the entries immediately. I have to close and open the dashboard again to see the result.

But if I delete the entry outside of the callback function then it removed at the same time:

$(".del").live({
    click: function () {
        $.post("/Home/DeleteTemplate", {
            name: $(this).parent().siblings("td:first").children("a").html()
        });
        $(this).parents("tr").remove(); //Outside the callback   
    }
});

What’s the problem here?

Answer 1

this does not refer to your selector inside callback, do this:

$(".del").live({ click: function () { 
  var that = $(this); // added this

  $.post("/Home/DeleteTemplate", 
        { name: that.parent().siblings("td:first").children("a").html() }, 
        function (data) { 
        that.parents("tr").remove(); // used "that" here
        }); 
  } 
});