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>

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>

• php
• javascript
• jquery

• your javascript and html looks solid (Sean's answer has a nice structure though). your problem may be something else entirely; on the success function, put a line to alert(html);. also add an error: function(html) { alert(html); } also. – rkw Commented Dec 4, 2012 at 8:02
• @rkw it returns the echo from the php "true". its pleting the mysql query on the back end but its not executing $(this).closest('tr').remove(); – savagenoob Commented Dec 5, 2012 at 2:55
• append return false; to your onclick statement; to prevent any postback that may occur. inside your success function, use the code from Adil. If that doesn't work, instead of the code from Adil, put in console.log($(this).closest('tr')) and see what object the console returns – rkw Commented Dec 5, 2012 at 6:31

5 Answers 5

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();
}

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

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.

use remove().

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

Have a look at Jquery remove - it will do the trick