jquery not working inside if after AJAX success/failure

Question

I have just started learning AJAX Before posting I have already searched and refered to previous asked questions like this but it didn't helped well My Code is:

$('.del').click(function(){
    $(this).parent().hide('slow');
    $.get( "index.php", {del:$(this).attr('id')}).done(function(data){
        if (data==='1') {
            $(this).parent().remove();
        }
        else{
            $(this).parent().show('slow');
        }
    });
});

the jquery statements inside if as well as else is not executed To verify every thing is going well I had added an alert in the statements and it popped up successfully but the jquery statements isn't working.Whats The problem and how to fix this ?

Answer 1

I believe your $(this) reference is incorrect in that scope. Try:

$('.del').click(function(){
    var $this = $(this);
    $this.parent().hide('slow');
    $.get( "index.php", {del:$this.attr('id')}).done(function(data){
        if (data==='1') {
            $this.parent().remove();
        }
        else{
            $this.parent().show('slow');
        }
    });
});

Answer 2

I think it may be that your 'this' variable is out of scope in the callback. Try binding it, or use jQuery's proxy() feature