表格中的刪除按鈕，jQuery

Question

我使用JS和jQuery編寫了代碼。 代碼將新行添加到表中。 每行都包含刪除按鈕，但它不起作用。 我要實現還編輯按鈕。

我的桌子：

<div class="row">
   <div class="col-md-12">
      <table class="table table-striped" id = "my-table">
       <thead>
        <tr>
            <th>Date</th>
            <th>Example</th>

        </tr>
          </thead>
          <tbody>



          </tbody>

        </table>

   </div>
   </div>
  </div>

JS代碼：

$(document).ready(function(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
} 

if(mm<10) {
mm='0'+mm
} 
today = mm+'/'+dd+'/'+yyyy;
//var counter = 1;


$('button#sending_button').click(function(){
    var text = $('textarea#mytextarea').val();
    $('#my-table').append('<tr><td>'+today+'</td><td>'+text+'</td><td><button type="button" id="delete-button"  class="btn btn-danger">Usuń</button></td></tr>');
    $('textarea#mytextarea').val('');
    //counter++;

});

$('#my-table').on('click', 'button.btn btn-danger', function() {
    $(this).parents('tr').remove();  

});

}）;

我不知道該問題我還需要解釋什么。

Answer 1

您的問題在這里：

$('#my-table').on('click', 'button.btn btn-danger', function() {

它應該是button.btn.btn-danger 。

一些隨機的建議：

• 不要重復每個按鈕的ID（“ delete-button ”）：ID應該是唯一的
• 請改用語義上有意義的類（ delete button也可以）
• 定義委托事件偵聽器時，請使用上述類，而不要使用button.btn.btn-danger （它太與DOM及其樣式定義綁定了）
• 使用parent而不是parents來避免意外。 它們是目標不同的兩種不同方法
• 事件效果更好，請使用closest 。