在AJAX函数中.remove（）不起作用

Question

In a jQuery click function using $.post() I have a .remove() function nested within the response function if the response returns true. My alert() appears to work correctly with the code is processed, however the .remove() does not seem to work whatsoever even though the alert() code in the same space appears to process. The same code when placed outside of $.post() works just fine.

var container = $(".container");
var delete = $("a.delete");
var dataId = $(delete).data("dataid");

delete.click(function(e) {
    e.preventDefault();
    $.post("url.php",
        {'data': dataId},
        function(response) {
            if (response == true) {
                alert("IT WORKED");
                $(this).closest(container).remove();
            }
        },
        "json"
    );
});

Answer 1

Make the following change and it should work. In the success callback this is the jqXHR object, therefore you have to cache this before the ajax call:

delete.click(function(e) {
    e.preventDefault();
    var that = $(this);
    $.post("url.php",
        {'data': dataId},
        function(response) {
            if (response == true) {
                alert("IT WORKED");
                that.closest(container).remove();
            }
        },
        "json"
    );
});

Answer 2

As an alternative to the other answer, one could also use the jQuery.proxy() function to associate the context with what you might desire.

For example:

delete.click(function(e) {
    e.preventDefault();
    $.post("url.php",
        {'data': dataId},
        $.proxy(function(response) {
            if (response == true) {
                alert("IT WORKED");
                $(this).closest(container).remove();
            }
        }, this),
        "json"
    );
});