javascript - JQUERY: Dynamic AJAX and html element removal

Question

Consider this code:

<tr>
<td>
<input type="checkbox" name="20081846" value="20081846" class="chk-input">
</td>
<td>20081846</td>
<td>AGONOY, JAY TAN</td>
</tr>

Let's say I have N of these in a table (with different sets of data). What I am planning is, if the user checks the input box, it will delete the users are checked. I got it using this JQUERY

var del_users = function(btn,chk,url) {
$(btn).click(function(){
    $(chk).each(function(){
        if($(this).attr('checked') == 'checked') {
            //pass code data
        }
    });
});
}

Which works, I just have to do the function that deletes the data.

My next problem is, once the data is deleted, I want the row displayed in the table to be removed in the display. Other than refreshing the entire entries, is there a way to selectively remove the checked "tr" elements?

Answer 1

$(chk).each(function(){
    if($(this).prop('checked') === true) {
         $(this).closest('tr').remove();
    }
});

Answer 2

Removes the row with a nice animation:

if($(this).attr('checked') == 'checked') {
    //pass code data
    var $row = $(this).closest('tr');
    $row.slideUp('fast',function() {
        $row.remove();
    });
}

You didn't post your ajax code, otherwise I would have added the removal code to the success callback (remember closure though!)