javascript - jQuery在ajax成功时删除元素

Question

我有<button>ajax ，并希望在成功请求后将其删除。

<script type="text/javascript">
    $(".approve").click(function(){
        var el, image_id =  $(this).data('image-id');
        $.ajax({
            type: "PATCH",
            dataType: "json",
            data: { "approved": "True"},
            url: "/ml/api/image/" + image_id + "/?format=json",
            success: function(data){
                $(this).remove();
            }
        });
    });
</script>

但这不起作用……</p>

Answer 1

成功回调中的上下文与单击事件的上下文不同，这意味着this不再引用按钮 DOM 元素。只需再次选择该按钮，它就会将其删除：

$(".approve").click(function(){
    var el = $(this), image_id =  $(this).data('image-id');
    $.ajax({
        type: "PATCH",
        dataType: "json",
        data: { "approved": "True"},
        url: "/ml/api/image/" + image_id + "/?format=json",
        success: function(data){
            el.remove();
        }
    });
});

Answer 2

另一种方法是将context属性传递给ajax：

$(".approve").click(function(){
    var image_id =  $(this).data('image-id');
    $.ajax({
        context: this,
        type: "PATCH",
        dataType: "json",
        data: { "approved": "True"},
        url: "/ml/api/image/" + image_id + "/?format=json",
        success: function(data){
            $(this).remove();
        }
    });
});

Answer 3

这是我的方法。简单的。

var element = $(this);

 $.ajax({
     success: function(){          
          element.remove();     
     }
});