Hide specific row with selected class

Question

I have this table:

while ($row = mysqli_fetch_array($result)) {
echo '<tr>';
    echo '<td> <button value="' . $row['id'] . '" class="btn btn-danger" id="delete"><i class="icon-remove icon-white"></i> Delete</button> </td>';
echo '</tr>';
}

which result in this:

enter image description here

I'm using this javascript to delete specific row:

<script type="text/javascript">
    $('.btn-danger').click(function() {
        alert("I am an alert box!");
        var one = $(this).val();
        $.post("post.php", { 
            id: one
        }, function(data) {
            if (data.response == 1) { 
                $(this).closest('tr').fadeOut(1000); //this line does not work 
            } 
            if (data.response == 0) { 
                alert("nope");
            } 
        }, "json");
    });
</script>

The fade out does not work. No fade happen. I'm not sure whats wrong but if I use id it's will worked. $('#delete').closest('tr').fadeOut(1000); but the problem is only top row will fade out and I dont want to use id. I'm doing my research about class but I still couldn't understand how to get this to work.

Please help me and thanks in advance.

`this` doesn't point to clicked button inside ajax success callback. Save `this` into variable before ajax call and use it in callback. — Regent, Oct 23 '14 at 06:50

score 1 · Accepted Answer · answered Oct 23 '14 at 06:52

this inside the done handler does not refer to the clicked button, that is the problem. You can use a closure variable to solve the problem.

$('.btn-danger').click(function () {

    alert("I am an alert box!");
    var $this = $(this),
        one = $this.val();
    $.post("post.php", {
        id: one
    }, function (data) {
        if (data.response == 1) {
            $this.closest('tr').fadeOut(1000); //this line does not work 
        }
        if (data.response == 0) {
            alert("nope");
        }
    }, "json");

});

well, I thought the problem was with my class. Thanks for the solution. — sg552, Oct 23 '14 at 07:36

Hide specific row with selected class

1 Answers1