Javascript 动态添加和删除表行

我正在使用jQuery添加和删除表行。我可以轻松地添加行，但删除已创建的行时遇到问题

您可以在此处查看正在运行的页面：，相关代码粘贴在下面

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>

$（函数（）{
var i=1；
$（“.addrow”）。单击（函数（）{
$（“表#产品列表tbody>tr:first”）.clone（）.find（“输入”）.each（函数（））{
$（this.attr）({
'id'：函数（_，id）{return id+i}，
“值”：”
});
}).end（）.find（“a.addrow”）.removeClass（“addrow”）.addClass（“removeow”）.text（“<删除此产品”）
.end（）.appendTo（“表#产品列表主体”）；
i++；
返回false；
});
$（“a.removerow”）。单击（函数（）{
//这将遍历到父TR
$（this.parent（）.parent（）.remove（）；
返回false；
});
});

当我单击该链接以删除包含该链接的行时，什么也没有发生。没有脚本错误，因此必须是逻辑错误。

试试这个

$("#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”）。单击（..

它只影响现有的元素（无），而不影响将动态创建的元素。

尝试使用

$（this.closest（'tr'）。remove（）；

。如果不起作用，请尝试使用

e.preventDefault（）；

而不是

返回false；

，但是把它放在函数的顶部。它不是；请看下面的答案中的原因。答案很好，我学到了一些关于不存在的元素交互的新知识。太棒了！