jQuery - Remove a table row after it's deleted

Question

I'm try to remove the deleted table row after it's been successfully deleted from the database but it not working. Here is my code.

This works:

$('table td img.delete').click(function(){
    if(confirm("Are you sure you want to permanently delete this?"))    
    $(this).parent().parent().remove();
    }
});

This doesn't work:

$('table td img.delete').click(function(){
    if(confirm("Are you sure you want to permanently delete this?"))    
    $.get('cfc/action.cfc?method=deleteLetter&returnformat=plain', {id: $(this).attr('id')},
        function(data){
            if(data.replace(/^\s+|\s+$/g, '')==='ok'){
            $(this).parent().parent().remove();
            }
        });
    }
});

This record get deleted here but the table row remains. Any suggestion would be much appreciated.

thanks!

Answer 1

Since it is being executed asynchronously, this is no longer pointing to the element you think it is. Save it in a variable (like target) and then remove that in the callback.

$('table td img.delete').click(function(){
    var target = this; //Save this here.
    if(confirm("Are you sure you want to permanently delete this?"))    
    $.get('cfc/action.cfc?method=deleteLetter&returnformat=plain', {id: $(this).attr('id')},
        function(data){
            if(data.replace(/^\s+|\s+$/g, '')==='ok'){
                $(target).closest("tr").remove(); //Remove closest table row here.
            }
        });
    }
});

Answer 2

$('table td img.delete').click(function(){
    var currentRow = $(this);
    if(confirm("Are you sure you want to permanently delete this?"))    
    $.get('cfc/action.cfc?method=deleteLetter&returnformat=plain', {id: $(this).attr('id')},
        function(data){
            if(data.replace(/^\s+|\s+$/g, '')==='ok'){
            currentRow.parent().parent().remove();
            }
        });
    }
});

This will work.

When you say this in anonymous method/function then "this" showing to that method or object where code is executed, But if you assign $(this) to variable then you can use it anywhere.

Answer 3

Your element has likely fallen out of scope.

Try to return a JSON string with a success indicator, and explicity parse the return value as JSON.

var myElementID = $(this).attr('id');
$.get('cfc/action.cfc?method=deleteLetter&returnformat=plain',
    {id: $(this).attr('id')},
    function(data){ 
        if(data.success){ $('#'+myElementID).parent().parent().remove(); }
    }, 'json');

Answer 4

Use closest to find the nearest tr element which is the row you want to delete. And also you need to maintain the current row in a variable because in the success handler of $.get, this will not point to img element. Try this

$('table td img.delete').click(function(){
    var $this = $(this);
    if(confirm("Are you sure you want to permanently delete this?"))    
    $.get('cfc/action.cfc?method=deleteLetter&returnformat=plain', {id: $(this).attr('id')},
        function(data){
            if(data.replace(/^\s+|\s+$/g, '')==='ok'){
            $this.closest('tr').remove();
            }
        });
    }
});

Answer 5

have you tried

$(this).closest('tr').remove(); 

?