使用jQuery刪除表格中的行

Question

我在表單中有一個表，其中具有動態行數，這些行通過單擊按鈕添加新的“虛擬”行來添加。 我在每行的末尾放置了一個按鈕，該按鈕應該刪除相應的行，但是我無法使Delete按鈕執行任何操作。 這是帶有按鈕的前排：

<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（）{}中，另一個用於添加行的按鈕位於同一函數中，並且運行良好。我已經研究了一整天，並嘗試了幾種不同的方法但是，當按鈕位於“虛擬行”中時，它們都不起作用。當按鈕位於該行之外時，它可以正常工作，只是不在行中。

有人知道我在做什么錯嗎？ 我不知道將按鈕放置在錯誤的位置還是將功能放置在錯誤的位置，或者以上都不是

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對於頁面“必須對文檔唯一”是唯一的 。 如果您打算多次使用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>