title: Hiding a dynamically created table row on click
body: <p>I'm currently trying to hide a dynamically created table row after a button has been pressed. So far I have managed to handle part of the dynamic functions.</p>
  
  <p>Each dynamic row has a "Cancel" and "Save" button, I have managed to respond to these with ease. My problem is actually working with the row itself.</p>
  
  <pre><code>$(function() {
      $(".add").click(function(){
          // Just append to the table
          $("table#bookmarks tr:first").after("&lt;tr class='new' id='&lt;?php echo rand(1, 9999); ?&gt;'&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;URL:&lt;/b&gt; &lt;input type='text' id='newURL' /&gt;&lt;br /&gt;&lt;b&gt;Title:&lt;/b&gt; &lt;input type='text' id='newTitle' /&gt;&lt;br /&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;br /&gt;&lt;textarea id='newDesc'&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Tags:&lt;/b&gt; &lt;input type='text' id='newTags' /&gt;&lt;/td&gt;&lt;td&gt;&lt;a href='#' class='save'&gt;Save&lt;/a&gt;&lt;br /&gt;&lt;a href='#' class='cancel'&gt;Cancel&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;");
          $('span#links').html('&lt;i style="color: #FF0000"&gt;You must reload to recount links!&lt;/i&gt;');
          // Actually, the user doesn't want to add another link
          $('.cancel').click(function() {
              $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow");
          });
          // Seems the user wants to add a link!
          $('.save').click(function() {
              $("table#bookmarks tr.new #id").animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow");
          });
      });
  
  });
  </code></pre>
  
  <p>I need to now hide the row, I have tried all sorts of various methods, .parent, .attr to name a few.</p>