从原始行插入表行和删除按钮

Question

我有一个带有最初1行输入字段的表的表单。用户可以单击“新建行”按钮以获取另一行，其中包含空输入字段。这留下了每行的“New Row”按钮的多个副本 - 我想删除除最近创建的“New Row”按钮之外的所有按钮（即输入字段的最后一行中的按钮）。

我在以下位置设置了一个示例JSFiddle：

http://jsfiddle.net/fmdataweb/vRe9v/2/

有什么东西可以添加到现有的js中，删除点击的按钮，同时将新创建的按钮留在新行中？这是Javascript：

var table = $( '#nextYear' )[0];

$( table ).delegate( '#button2', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
   $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

Answer 1

使用$(this).remove(); jQuery $（this）如果控制代表控件触发了哪个事件。您可以使用remove()方法删除从dom点击的按钮

Live Demo

var table = $('#nextYear')[0];

$(table).delegate('#button2', 'click', function() {

    var thisRow = $(this).closest('tr')[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('');
    $(this).remove();
});​

Answer 2

您可以使用jQuery remove()从DOM中删除匹配元素集。

在您处于按钮单击事件中的情况下，this是引用DOM中按钮对象的内容。

将this转换为jQuery对象并在其上调用remove()，如下所示：

$(this).remove();

完成新代码：

var table = $('#nextYear')[0];

$(table).delegate('#button2', 'click', function() {
    var thisRow = $(this).closest('tr')[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('');

    $(this).remove(); // remove button that was clicked
});​ 

见DEMO

Answer 3

试试这个：DEMO：http://jsfiddle.net/xRQs8/2/

可以使用单个按钮完成：+

<table id="dataTable" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                            <td>
                                                <input type="Button" value="Add More" name="AddMore" class="AddOption" />
                                            </td>
                                        </tr>
                                    </table>