テーブルの削除ボタン、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する必要があります。

いくつかのランダムな提案：

• 各ボタン（「delete-button」）のIDを繰り返さないでください：IDは代わりに、意味的に意味のあるクラスを使用し
• 一意である必要があります（delete buttonも良いでしょう）
デリゲートのイベントリスナーを定義するときに
• 使用すると、AVOに使用parent代わりのparents
• （DOMとそのスタイル定義にすぎバインドされている）の代わりにbutton.btn.btn-dangerの、クラスを言いましたIDの驚き。彼らは別の目標を持つ2つの異なる方法です
• イベントは、より良い、closestを使用してください。