动态添加和删除表格行

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(.. 时，它只会影响存在的元素（无），而不影响将动态创建的元素。