jquery delete table row

jquery

Solution

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.

Problem

I have a table ``` <table id="favoriteFoodTable"> <th> Food Name: </th> <th> Restaurant Name: </th> <th> </th> <?php while ($row = $foods->fetch()) { ?> <tr> <td> <?php echo $row['foodName']; ?> </td> <td> <?php echo $row['restaurantName']; ?> </td> <td> <a class="deleteLink" href="" >delete</a> </td> </tr> <?php } ?> </table> ``` I use this jquery function so when a user click on delete, the background of the row will change and the row then will delete ``` $(document).ready(function() { $("#favoriteFoodTable .deleteLink").on("click",function() { var td = $(this).parent(); var tr = td.parent(); //change the background color to red before removing tr.css("background-color","#FF3700"); tr.fadeOut(400, function(){ tr.remove(); }); }); }); ``` just the background is changing but the row is not deleted, why? how to solve?

Original source