JqueryでTo-Doリストを作成すると、ボタンをクリックして動的に追加されたテーブル行を削除することはできません

Question

テキストボックスから入力を受け取り、それをテーブル要素。追加された各入力は、ボックスに入力された値を持つ新しいtrを作成し、その横にインラインボタンが表示されます。

ボタンを追加する前に、私のクリック機能でTRを削除しました。ボタンをクリックしてクリックを削除しようとしているので、何もしないでボタンを削除しますが、trとそのテキストは保持します。

$('input').keypress(function(event){ 
    var x = $('input:first').val(); 
    if(event.which === 13){ 
     $('#listTable').append('<tr class= "listItem"><td><button type="button" class="btn btn-default deleteButton" aria-label="Left Align"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>'+x+'</td></tr>')//adds a new tr with the input from the box and prints it in the td of the tr 
     $('input').val(""); 
    } 
    $('.deleteButton').on('click', function(){ 
     $(this).remove(); 
    });  
}); 

Answer 1

$('#listTable').on('click', '.deleteButton' , function(){ 
    alert('remove'); 
    $(this).parent().remove(); 
    //or $(this).closest('.listItem').remove(); 
}); 

の代わりにこれは完全に働いた

$('.deleteButton').on('click', function(){ 
    $(this).remove(); 
});