jquery delete table row

Answer 1

What you forgot to do is to set hash in your link. example:

<a class="deleteLink" href="" >delete</a>

should be

<a class="deleteLink" href="#" >delete</a>

or

return false;

at end of your

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        ...
        return false;
    });
});

Answer 2

Try

var tr = $(this).closest('tr');
tr.detach();

Worked for me!

Answer 3

Here is another option.

function DeleteRowOfProductTable(productID){
    $('#YourTableId tr').each(function (i, row) {
        var $row = $(row);
        var productLabelId =  $row.find('label[name*="Product_' + productID + '"]');

       var $productLabelIdValue = $productLabelId.text();
       if (parseInt(productID) == parseInt($productLabelIdValue))
       {
           $row.remove(); 
       }
    });
 }

Answer 4

If you want only 1 row in the table to be selected at a time

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");

Answer 5

The row is deleted but as clicking makes you follow the link, it's immediately restored when the page is refreshed.

Add return false; or event.preventDefault(); at the end of the callback to prevent the default behavior :

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        var tr = $(this).closest('tr');
        tr.css("background-color","#FF3700");
        tr.fadeOut(400, function(){
            tr.remove();
        });
        return false;
    });
});

Demonstration

Note that I used closest for a more reliable code : if another element comes in between, the tr will still be found.