Динамически добавлять и удалять строки таблицы

Question

Я добавляю и удаляю строки таблицы с помощью jQuery. Я могу легко добавлять строки, но у меня проблемы с удалением тех, которые были созданы.

Вы можете просмотреть страницу в действии здесь: http://freshbaby.com/v20/wic/request_quote.cfm, с соответствующим кодом, вставленным ниже.

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> 

Когда я нажимаю на ссылку, чтобы удалить строку, указанную ссылку содержится в, ничего не происходит. Нет ошибки скрипта, поэтому она должна быть логикой.

Answer 1

Попробуйте вместо

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

Это будет гарантировать, что вновь создаваемые элементы могут быть удалены. Когда вы используете $("a.removerow").click(.., он влияет только на существующие элементы (none), а не те, которые будут динамически создаваться.