title: jquery delete table row
body: <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 background is changing but the row is not deleted, why? how to solve?</p>