Cannot remove element after ajax call

Question

I have this script:

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

and document portion:

<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>

The task is to delete tr portion after file is removed. I cannot make it work. File is getting removed the respond is 200, OK but remove() doesnt work even if I replace success with complete in ajax. What could it be?

the `$(this)` will not work under success function of ajax you will have to store it into some variable. — valar morghulis, Mar 31 '15 at 09:48

score 6 · Answer 1 · edited May 23 '17 at 12:22

6

The context of element is lost in ajax call, you can set the context to ajax using option context:

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

Context option in ajax

edited May 23 '17 at 12:22

Community

1
1

answered Mar 31 '15 at 09:45

Milind Anantwar

81,290
25
94
125

score 1 · Answer 2 · answered Mar 31 '15 at 09:45

get this as one variable as and use it

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

score 1 · Answer 3 · answered Mar 31 '15 at 09:45

Set $this variable with $(this) and use it in your success handler of your Ajax call like so.

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

score 1 · Accepted Answer · answered Mar 31 '15 at 09:47

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

score 0 · Answer 5 · answered Mar 31 '15 at 09:49

Assign some variable on click datathis use it in success function

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

Cannot remove element after ajax call

5 Answers5