jquery delete table row

Question

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?

Answer 1

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.