javascript - 使用 Jquery 创建待办事项列表，无法通过单击按钮删除动态添加的表行

Question

所以我有代码从文本框中获取输入并将其添加到作为表格元素的待办事项正文中。添加的每个输入都会创建一个新的 tr，它具有输入框中的值，并在其旁边显示一个内联按钮。

在我添加按钮之前，我用于删除 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();
});