Cannot .remove an .append'ed row

Cannot .remove an .append'ed row

Ok, Way cool how I can add a row by clicking "add".  And just as great how I can delete a row by clicking "delete".  But why, why, why can I not add a row, and then delete that row?  Thank you!

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  5. <title>Testing</title>
  6.  
  7. <script src="http://code.jquery.com/jquery-latest.js"></script>
  8.  
  9. <script>
  10. $(function(){
  11.     $(".delete_me").click(function()
  12.     {
  13.         row=$(this).parent().parent();
  14.         if(window.confirm("Are you sure?"))
  15.         {row.remove();}
  16.     });
  17.     $("#add_one").click(function()
  18.     {
  19.         var clone = $("#clone").clone();
  20.         clone.removeAttr('class').removeAttr('id');
  21.         $('td', clone).eq(0).text('Rochelle');
  22.         $("#mytable tbody").append(clone);
  23.     });
  24. });
  25. </script>
  26. <style type="text/css">
  27. .gone{display: none;}
  28. </style>
  29. </head>
  30. <body>
  31. <div>
  32. <a href="#" id="add_one">Add</a>
  33. <table id="mytable">
  34. <thead><tr><th>Name</th><th></th></tr></thead><tbody>
  35. <tr class="gone" id="clone"><td></td><td><a href="#" class="delete_me">Delete</a></td></tr>
  36. <tr><td>John</td><td><a href="#" class="delete_me" >Delete</a></td></tr>
  37. <tr><td>Mary</td><td><a href="#" class="delete_me" >Delete</a></td></tr>
  38. </tbody>
  39. </table>
  40. </div>
  41. </body>
  42. </html>