无法删除具有删除功能的字段

Question

此图显示了方案

当我的页面加载并且我去插入数据时，这四个将默认显示。当我点击最后一行的+ button时，现在当我点击x button时，它会在添加行后显示当前的ID，但是当我想删除它时，它不会删除该行。

我的javascript代码是

$(document).on('click', 'button[name=forLess]', function() {
        var currentId = $(this).attr('id');
        //alert($(this).attr('id'));
        alert(currentId);
        //$("#addMoreCounter_" + currentId).remove();
    });

如果当前文本字段中有内容写入，则当前文本字段也应为空。

Answer 1

在没有HTML的情况下，让我们做一些假设：

• 行是表中的tr元素
• [+]按钮有class="add"
• [x]按钮有class="remove"

你可以这样做：

$(function() {
    $("#myTable").on('setButtonState', function () { //Attach a custom event handler on the table, for setting the state of its remove buttons.
        var $remove = $(this).find('.remove');
        $remove.prop('disabled', $remove.length <= 4); //Disable the [x] buttons if there are 4 or less, otherwise enable them.
    }).on('click', '.add', function() { //Delegate click handling of the [+] buttons' to the table.
        // ... your append() code here ...
        $this.closest('table').trigger('setButtonState');
    }).on('click', '.remove', function() { //Delegate click handling of the [x] buttons' to the table.
        $this.closest('tr').remove().closest('table').trigger('setButtonState');
    }).trigger('setButtonState'); //Set the initial state of the [x] buttons (on page load)
});

请注意：如果第一行是可删除的，那么您需要将[+]按钮放在其他位置，否则您将丢失它！