jQuery - Remove a table row after it's deleted from database

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

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