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

【问题标题】：Remove Button to configure in Table (editable) cloned rows删除按钮以在表（可编辑）克隆行中配置
【发布时间】：2015-09-28 02:39:23
【问题描述】：

我有一个editable table with rows cloned，克隆的行在两列中都是可编辑的，带有文本区域和输入数字。如果您点击编辑输入的数字，有一个功能可以自动计算总和并给出总金额。

我现在的问题是我无法正确配置克隆行的删除按钮。如果您尝试一下，您会注意到它没有删除一行，而是增加了一行。请帮助我解决这个问题。

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

$('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');

My Table

【问题讨论】：

这是因为.tr_clone_remove也是一个按钮，当它被点击时，绑定到input:button的函数会被触发。
见jsfiddle.net/S3kZw/8
live 已弃用。你可以改用on。
谢谢，这没关系，但是当我单击添加按钮克隆该行时，它会得到我编辑的上一个，而不是带有占位符点击编辑的原始行

标签： jquery html-table

【解决方案1】：

将tr.after 函数更改为：

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

将remove() 调用为：
```
$(this).parent().parent().remove();
```

这里是fiddle。

【讨论】：

【解决方案2】：

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

由于tr_clone_remove 类也是按钮类型的输入，所以每次单击删除按钮时都会调用第一个处理程序。
```
$('input:button').live('click',function(){
    var temprow = $('#temprow tbody').html();
    var tr = $(this).closest('tr');
    tr.after(temprow);
});
```
这就是插入行而不是删除行的原因。
另外，使用正确的代码更新了删除行块。

【讨论】：