删除按钮以在表（可编辑）克隆行中进行配置

Question

我有一个可编辑的表，其中包含已克隆的行，已克隆的行在带有文本区域和输入数字的两列中都是可编辑的。 如果单击以编辑输入数字，则有一个功能可以求和并自动给出总金额。

我现在的问题是我无法为克隆的行正确配置删除按钮。 如果您尝试一下，您会发现它不会删除一行，而是会添加一行。 请我需要有关如何解决此问题的帮助。

这是克隆行的脚本，我认为需要减少和改进

$('input:button').live('click',function(){
    var temprow = $('#temprow tbody').html();
    var tr = $(this).closest('tr');
    tr.after(temprow);
});

$("input.tr_clone_add").live('click', function() {
    var lastid = $('[id^="sum"]').length + 1;
    var $tr = $(this).closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $clone.attr('id', 'sum' + lastid)
    $tr.after($clone);
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

$(".tr_clone_remove").live("click", function() {
$(".tr_clone").last().remove();
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

initEditables();
tally('p#subtotal');
tally('p#total'); 

我的桌子

Answer 1

1. 将tr.after函数更改为：

    if ($(this).val() == '+') { tr.after(temprow); } 

2. 通过以下方式进行remove()调用：

    $(this).parent().parent().remove(); 

这是小提琴 。

Answer 2

使用正确的解决方案编辑了Fiddle： http ： //jsfiddle.net/Manna/S3kZw/5/

• 由于tr_clone_remove类也是按钮类型的输入，因此，每当您单击remove按钮时，都会调用第一个处理程序。

   $('input:button').live('click',function(){ var temprow = $('#temprow tbody').html(); var tr = $(this).closest('tr'); tr.after(temprow); }); 

  这就是为什么要插入行而不是删除行的原因。

• 同样，使用正确的代码更新了删除行块。