jquery delete table row
<p>I have a table</p>

<pre><code>&lt;table id="favoriteFoodTable"&gt;
    &lt;th&gt;
        Food Name:
    &lt;/th&gt;
    &lt;th&gt;
        Restaurant Name:
    &lt;/th&gt;
    &lt;th&gt;

    &lt;/th&gt;
    &lt;?php while ($row = $foods-&gt;fetch()) {
        ?&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;?php echo $row['foodName']; ?&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;?php echo $row['restaurantName']; ?&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;a class="deleteLink" href="" &gt;delete&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;?php } ?&gt;
&lt;/table&gt;
</code></pre>

<p>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</p>

<pre><code>$(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();
        });
    });
});
</code></pre>

<p>just the backgound is changing but the row is not deleted, why pelase?how to solve </p>
