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

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(.. это влияет только на существующие элементы (нет), а не те, которые будут динамически созданы.