1

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

我在以下位置设置了一个示例 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( '' );
});

​</p>

4

3 回答 3

1

您可以使用 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
});​

见演示

于 2012-08-15T11:52:38.097 回答
1

在控件事件中使用$(this).remove();jQuery $(this) 表示触发事件的控件。您可以使用remove()将删除正在单击的按钮的方法dom

现场演示

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();
});​
于 2012-08-15T11:53:48.263 回答
1

试试这个：演示：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>
于 2013-05-12T18:25:32.093 回答