jQuery帮助在追加后删除div

Question

I have some problem with jQuery, won't to remove div after is created...here is the code

$('.del').on('click', function() {
        //delItem = $(this);
        var data_id = $(this).attr('rel');
        $.post('index/xhrDelete', {'data_id': data_id}, function(o) {
            //delItem.parent().remove(); // i have tried this too
            $(this).parent().remove();
        }, 'json');
        return false;
});

it removes div but when i refresh manually...but i want to be without refreshing the page here is html....

<div>
     ccc
     <a class="del" href="#" rel="5">X</a>
</div>
<div>
test
     <a class="del" href="#" rel="21">X</a>

testd X

Answer 1

Give a shot with this :

$('.del').on('click', function(e) { // Notice the 'e' in the function
    $this = $(e.target); // Use it to retrieve the element that fired the event and turn it into a jQuery object
    var data_id = $(this).attr('rel');
    $.post('index/xhrDelete', {'data_id': data_id}, function(o) {
        $this.parent().remove(); // You just need to remove its parent
    }, 'json');

    return false;

});

Answer 2

Try this out...

$('.del').on('click', function() {
       var self=this;
        var data_id = $(self).attr('rel');
        $.post('index/xhrDelete', {'data_id': data_id}, function(o) {
            //delItem.parent().remove(); // i have tried this too
            $(self).parent().remove();
        }, 'json');
        return false;
});

Hope it helps....