jQuery Remove table row on $.ajax success

Question

I need to remove a table row after a successful ajax call, not sure how to do it. Here is my code:

function closelead(rowid){
            var rowid1 = rowid;
            alert(rowid1);
            var parent = $(this).parent();
            $.ajax({
                type: "POST",
                url: "ajax/close.php",
                data: "rowid="+ rowid1,

                success: function(html){


                }
            });

            }

<tr><td><input type="button" onclick="closelead(<?php echo $leadlist['ID'];?>)" value="Close" class="searchbutton" /></td></tr>

Answer 1

You can use closest() to find out the row containing the clicked button and use remove() to remove the row of button.

success: function(html){
       $(this).closest('tr').remove();
}

Answer 2

Onclick is so 1999...

$('#closelead').on('click', function() {
    var $row = $(this).parent().parent();
    var rowid = $(this).data("row-id");
    $.ajax({
        type: "POST",
        url: "ajax/close.php",
        data: "rowid=" + rowid,
        success: function() {
            $row.remove();
        }
    });
});​

Change HTML to this.

<tr><td><button id="closelead" class="searchbutton" data-row-id="<?php echo $leadlist['ID'];?>">Close</button></td></tr>

DEMO

Answer 3

Look in your code you already have var parent = $(this).parent(); declared. Now after successful ajax response use parent.parent().remove(); This would be easy and understandable too.

Answer 4

使用remove().

$(this).closest('tr').remove();

Answer 5

看看jQuery的删除 -它会做的伎俩