不在桌子上工作的刪除按鈕

Question

我創建了一個表，其中刪除/擦除按鈕對我不起作用。 我已經盡力了，但它對我不起作用。請幫助我如何使這個擦除按鈕可用。

 $(".butnBorrar").click(function(event) { $("#table125").each(function() { $(this).closest('tds').remove(); }); }); $("#insert15").click(function() { $("#table125").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table>

Answer 1

這是一個完全有效的示例：-

注意-> 這種處理點擊的技術稱為事件冒泡，用於將動態 HTML 添加到您的頁面。

 $(document).on('click','.butnBorrar',function(event) { //console.log('clicked'); $(this).closest('tr').remove(); }); var template = $('#table125 > tbody:last-child').html(); $("#insert15").click(function() { $('#table125 > tbody:last-child').append(template); });

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table> </body> </html>

希望能幫助到你。

Answer 2

你需要這樣做

$(document).on('click', '.butnBorrar', function(event) {

  $(this).parent().parent().remove();

  // OR

  $(this).closest('tr').remove();

});

 $(document).on('click', '.butnBorrar', function(event) { //$("#table125").each(function() { $(this).parent().parent().remove(); //or //$(this).closest('tr').remove(); //}); }); $("#insert15").click(function() { $("#table125").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table>

Answer 3

您應該使用 $(document).on('click', '.butnBorrar' 代替：

$(document).on('click', '.butnBorrar' , function(event) {
   $(this).closest('tr').remove();
});

這樣 jQuery 會偵聽文檔上的點擊事件，如果目標元素是.butnBorrar （例如） - 該函數將被觸發。 元素是否動態添加無關緊要 - 單擊事件始終在文檔上，jQuery 將檢查目標元素（並相應地采取行動）。

這是您的代碼段的更新：

 $(function(){ $(document).on('click', '.butnBorrar' , function(event) { $(this).closest('tr').remove(); }); $("#insert15").click(function() { $("#table125").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); }); });

 <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

不在桌子上工作的刪除按鈕

問題描述

3 個解決方案

解決方案1
1 已采納 2017-02-01 06:28:16

解決方案2
0 2017-02-01 06:13:06

解決方案3
0 2017-02-01 06:20:57

不在桌子上工作的刪除按鈕

問題描述

3 個解決方案

解決方案1 1 已采納 2017-02-01 06:28:16

解決方案2 0 2017-02-01 06:13:06

解決方案3 0 2017-02-01 06:20:57

解決方案1
1 已采納 2017-02-01 06:28:16

解決方案2
0 2017-02-01 06:13:06

解決方案3
0 2017-02-01 06:20:57