ajax 调用后无法删除元素

Question

我有这个脚本：

<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() 也不起作用。可能是什么？

Answer 1

获取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');
    });
});

Answer 2

元素的上下文在 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

Answer 3

用 $(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');
    });
});

Answer 4

<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');
});
});

Answer 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');
    });

ajax 调用后无法删除元素

Cannot remove element after ajax call

ajax

jquery

phalcon