克隆/删除 TR 行 - 几乎可以正常工作

Question

我正在使用我在此 fiddle 中找到的代码，它几乎完美地满足了我的需要。

该代码允许我克隆另一个 TR 并可以选择删除克隆的行。

我遇到的问题是我不想删除所有行。

如何阻止脚本删除第一行？

我试过了:

var numItems = $('.DeleteBoxRow').length
if (numItems >1) {
 $(this).closest('tr').remove();
}

但这似乎有点碰运气。

我还发现，如果我添加然后删除行，我会遇到无法再次添加的问题。

有什么关于如何排序的建议吗？谢谢

Answer 1

由于您正在处理动态元素，因此请使用 event delegation, .delegate() is used since in the fiddle jQuery 1.6 is used, if you are using jQuery >= 1.7 use .on()

$('#BoxTable').delegate('.DeleteBoxRow:not(#TemplateRow .DeleteBoxRow)', 'click', function() {

        $(this).closest('tr').remove();
});

还需要更改克隆行的 ID，因为元素的 ID 必须是唯一的。同样在上面的选择器中，我们排除了 ID 为 TemplateRow 的元素中的 .DeleteBoxRow 元素，因此如果还有任何其他行具有该 ID，则删除将不起作用

var $newRow = $('#TemplateRow').clone(true).removeAttr('id');

演示：Fiddle

Clone / Remove TR Row - Almost working