Dynamically adding and deleting table rows

Question

I add and delete table rows using jQuery. I can easily add lines, but I have problems deleting those that were created.

You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm with the corresponding code inserted below.

HTML

<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase"> <thead valign="top" align="left"> <tr> <th>Products</th> <th>Language</th> <th>Quantity</th> <th></th> </tr> </thead> <tbody valign="top" align="left"> <tr> <td> <cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below"> <option value=""></option> </cfselect> </td> <td> <select name="language" size="1"> <option value="English">English</option> <option value="Spanish">Spanish</option> </select> </td> <td> <cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999"> </td> <td valign="bottom"><a href="javascript://" class="addrow">Add Another Product</a></td> </tr> </tbody> </table> 

JavaScript:

 <script> $(function() { var i = 1; $(".addrow").click(function() { $("table#product-list tbody > tr:first").clone().find("input").each(function() { $(this).attr({ 'id': function(_, id) { return id + i }, 'value': '' }); }).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product') .end().appendTo("table#product-list tbody"); i++; return false; }); $("a.removerow").click(function() { //This should traverse up to the parent TR $(this).parent().parent().remove(); return false; }); }); </script> 

When I click a link to delete the line that contains the link, nothing happens. There is no script error, so it should be logical.

Answer 1

Try this instead

 $("#product-list").on('click','a.removerow',function(e) { e.preventDefault(); //This should traverse up to the parent TR $(this).closest('tr').remove(); return false; }); 

This ensures that newly created items can be deleted. When you use $("a.removerow").click(.. , this only affects the existing elements (none), and not those that will be dynamically created.