Question

我在表单中有一个表格，其中包含动态行数，通过单击按钮添加新的＆＃34;虚拟＆＃34;行。我在每行的末尾放了一个按钮，该按钮应该删除相应的行，但我无法通过删除按钮执行任何操作。这是带按钮的enitre行：

<tr id="dummyRow" class="hidden-print" style="display:none">
    <td></td>
    <td></td>
    <td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
    <td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
    <td><input id="Desc" name="Desc" class="hidden" value=""></td>
    <td class="totalCol" taxable="true"></td>           
    <td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td> 
</tr>

这是我目前拥有的功能（不起作用）

 $("#deleteRow").click(function() {
        var tr = $(this).closest('tr');
            tr.remove();
            totalQuote();
          return false;
         });

该函数在$（document）.ready（function（）{}内，另一个添加行的按钮在同一个函数中工作正常。我已经研究了一整天，并尝试了几个不同的这样做的方法，但当按钮在＆＃34;虚拟行内时，它们都不起作用。＆＃34;当它在行外时，它工作正常，不在行内。

有谁知道我做错了什么？我不知道我是将按钮放在错误的位置还是将功能放在错误的位置或以上都没有

Answer 1

由于它是隐藏的，您可以尝试在屏幕上显示一次并将其删除吗？

$(function () {
  $("#deleteRow").click(function() {
    var tr = $(this).closest('tr');
    tr.remove();
    totalQuote();
    return false;
  });
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<table>
  <tr id="dummyRow" class="hidden-print">
    <td></td>
    <td></td>
    <td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
    <td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
    <td><input id="Desc" name="Desc" class="hidden" value=""></td>
    <td class="totalCol" taxable="true"></td>           
    <td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td> 
  </tr>
</table>

如果您使用.clone()使用.on()，请尝试委派功能。当您提供.clone()时，请将这两个参数传递为true：

.clone(true, true);

这也是用于克隆事件的。

Answer 2

如果您将此行用于克隆目的，则必须将未来事件绑定到该按钮，并且需要使用类而不是ID。

要将所有DOM和未来的DOM和事件绑定到JS，您应该使用.on()

$("body").on("click",".deleteRow",callBack);

Answer 3

由于某种原因，这不适用于您的表格代码，但请在此JSFiddle内查看此代码;

$('button.btn').on('click', function () {
    var a = $(this).parent().parent().remove();
    totalQuote();
    return false;
});

Answer 4

ID应该是页面"It must be unique to a document"的唯一ID。如果您计划多次使用dummy行，我建议您在按钮上放置一个类，然后使用事件委派来处理.delete-row

以下是事件委派的简单示例：

(function () {
    // Event delegation:
    $('#unique-table-id').on('click', 'button.delete-row', function () {
    	$(this).closest('tr').remove();
    });
 
    $('button.add-row').on('click', function () {
        $('#unique-table-id').append($('<tr><td>' + $('#unique-table-id tr').length + '</td><td><button class="delete-row">Delete</button></td></tr>'));
    });
})();

table td {
    border: 1px solid black;
}

table {
    border: 1px solid black;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-row">Add Row</button>

<table id="unique-table-id"></table>

Answer 5

@Burimi完全正确。这个功能完美无缺。

$("#quoteForm").on("click", ".deleteBtn", function(e) {
            $(this).parent().parent().remove();
        totalQuote();

     });

它也适用于.closest而不是.parent().parent()

Answer 6

尝试在行id中添加唯一值以进行标识。

$('#myTableRow').remove();

如果您的行有id，则可以正常使用，例如：

<tr id="myTableRow"><td>blah</td></tr>

使用jQuery删除表中的Row

6 个答案: