父母删除不适用于附加元素

Question

I'm trying to remove a div after it the remove link on that div is clicked. The divs are generated using append after the website is loaded.

Appended HTML:

<div class="reviews">
<div class="row-fluid" id="57">
    <div class="span2">
        <img src="img/default_male.png" alt="Male Default Photo">
    </div>
    <div class="span10">
        <h6>Test Test</h6>
        <img class="rating-stars" src="img/2star.png" alt="2 Stars">
        <br>
        <p class="comment-info">
            <time class="timeago" datetime="2013-09-19 22:49:59" title="Thursday, Sep 19, 2013 - 10:49 PM">5 minutes ago</time>, 
            <a href="#removereview" class="removereview">remove</a>
        </p>
    </div>
</div>

My JQuery Code:

            $(".reviews").on('click', '.removereview', function() {
            var review_id = $(this).parents('.row-fluid').attr('id');
            console.log(review_id);

            $.ajax({
                type: "POST",
                url: "event_send.php",
                data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
                success: function(response){
                    $(".review-count").html(parseInt($(".review-count").html()) - 1);
                    $(this).closest('.row-fluid').remove();
                }
            });

            return false;
        });

The problem is that the div doesn't get removed although the right ID is chosen by the code. Any ideas on how to fix the problem?

Thank you

Answer 1

this inside the success handler does not refers the clicked element so your selector $(this).closest('.row-fluid') fails to find the element.

One solution is to use a closure variable self which then will be used inside the success handler

$(".reviews").on('click', '.removereview', function() {
    var review_id = $(this).parents('.row-fluid').attr('id');
    console.log(review_id);

    var self = this;
    $.ajax({
        type: "POST",
        url: "event_send.php",
        data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
        success: function(response){
            $(".review-count").html(parseInt($(".review-count").html()) - 1);
            $(self).closest('.row-fluid').remove();
        }
    });

    return false;
});

Another is to use $.proxy() to pass a custom context to the success callback

$(".reviews").on('click', '.removereview', function() {
    var review_id = $(this).parents('.row-fluid').attr('id');
    console.log(review_id);

    $.ajax({
        type: "POST",
        url: "event_send.php",
        data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
        success: $.proxy(function(response){
            $(".review-count").html(parseInt($(".review-count").html()) - 1);
            $(this).closest('.row-fluid').remove();
        }, this)
    });

    return false;
});

Answer 2

I believe you are trying to remove the element you got in review_id ; Why not remove it directly?

$('#'+review_id).remove();

correct me if I misunderstood your question.