Delete Row from HTML Table by clicking it using jQuery

The task is to remove the rows from a HTML table using some effects just by clicking the row. Following is the jQuery code to achieve this.

$(document).ready(function() {
    $("#sample tr").click(function() {
        //change the background color to red before removing
        $(this).css("background-color","#FF3700");
         
        $(this).fadeOut(400, function(){
            $(this).remove();
        });
    });
});

In above code we have attached handler with all “tr” in “#sample” table. On click we are first changing the background of the row and then fade it out and remove it. This is such a simple task.