ajax调用后无法删除元素答案

【问题标题】：Cannot remove element after ajax callajax调用后无法删除元素
【发布时间】：2015-06-04 14:33:27
【问题描述】：

我有这个脚本：

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.remove',function(e){
        // e.preventDefault();
        var data = $(this).data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                $(this).parents('tr').remove();
            }
        },'json');
    });
});

和文档部分：

<tr>
                <td>adif20150331133844.adi</td>
                <td style="width: 2em"><span class="remove link" data-file="adif20150331133844.adi"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></span></td>
                <td style="width: 2em"><span class="restore link" data-file="adif20150331133844.adi"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></span></td>
            </tr>

任务是删除文件后删除 tr 部分。我不能让它工作。文件被删除，响应为 200，好的，但即使我在 ajax 中用完成替换成功，remove() 也不起作用。会是什么？

【问题讨论】：

$(this) 在 ajax 的成功函数下将不起作用，您必须将其存储到某个变量中。

标签： jquery ajax phalcon

【解决方案1】：

元素的上下文在ajax调用中丢失，您可以使用选项context将上下文设置为ajax：

$.ajax({
        type:'POST',
        url:'/backup/delete',
        context:this,
        data:'fileName='+data,
        success: function(data){
            $(this).parents('tr').remove();
        }
    },'json');

Context option in ajax

【讨论】：

【解决方案2】：

<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','.remove',function(e){
    // e.preventDefault();
    var oThis = $(this);
    var data = $(this).data('file');
    $.ajax({
        type:'POST',
        url:'/backup/delete',
        data:'fileName='+data,
        success: function(data){
            oThis.parents('tr').remove();
        }
    },'json');
});
});

【讨论】：

【解决方案3】：

将 this 作为一个变量作为并使用它

$(document).ready(function(){
    $(document).on('click','.remove',function(e){
        // e.preventDefault();

var _this=$(this);  // assign this as one variable
        var data = _this.data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                _this.parents('tr').remove();  // here this not .remove                 }
        },'json');
    });
});

【讨论】：

【解决方案4】：

用$(this) 设置$this 变量，并像这样在你的Ajax 调用的成功处理程序中使用它。

jQuery(function($) {
    $(document).on('click','.remove',function(e){
        var $this = $(this); // set it
        // e.preventDefault();
        var data = $(this).data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                $this.parents('tr').remove(); // use it
            }
        },'json');
    });
});

【讨论】：

【解决方案5】：

在点击时分配一些变量datathis在成功函数中使用它

$(document).ready(function(){
    $(document).on('click','.remove',function(e){
        // e.preventDefault();
       var datathis=$(this);  // assign this as one variable
        var data = _this.data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                datathis.parents('tr').remove();  
}
        },'json');
    });

【讨论】：