Javascript 使用jQuery删除div不适用于动态添加的div

我在一个按钮点击中添加了div，我希望用户能够通过点击“X”来删除列表中添加的项目，这是一个锚，但点击后不会触发任何事件，这是我的代码，我甚至尝试过绑定，但似乎没有任何效果

(function ( $ ) { 
$(document).ready(function(){
$(".btn-add").on("click",function() {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".this-name").text(); // Find the text

// Let's test it out
$('#col2').append('<div class="item"><p>'+$text+'</p><a href="#" class="delete-button">X</a></div>');
});

});

$("document").on('click','.delete-button', function(e){
 e.preventDefault();
 alert('yes');
 $(this).closest('.item').remove();
});

}( jQuery ));

（函数（$）{
$（文档）.ready（函数（）{
$（“.btn添加”）。在（“单击”，函数（）{
var$row=$（this）.closest（“tr”）；//查找该行
var$text=$row.find（“.this name”）.text（）；//查找文本
//让我们测试一下
$（'#col2'）。追加（''+$text+'
'）；
});
});
$（“文档”）。在（'单击'，'删除按钮'，函数（e）{
e、 预防默认值（）；
警惕（“是”）；
$（this）.closest（'.item'）.remove（）；
});
}（jQuery））；

感谢您的帮助，请尝试以下操作：onClick=“$（this）.parent（）.remove（）；”

（函数（$）{
$（文档）.ready（函数（）{
$（“.btn添加”）。在（“单击”，函数（）{
var$row=$（this）.closest（“tr”）；//查找该行
var$text=$row.find（“.this name”）.text（）；//查找文本
//让我们测试一下
$（'#col2'）。追加（''+$text+'
'）；
});
});
$（文档）。在（'单击'，'上。删除按钮'，函数（e）{
e、 预防默认值（）；
警惕（“是”）；
$（this）.closest（'.item'）.remove（）；
});
}（jQuery））；

这是

文档

不是

“文档”

你能添加相关的

html

，这样我们就可以复制它吗？Syed-你对问题的编辑删除了点，但没有删除引号。引号是个问题，我觉得很傻。现在工作正常了，谢谢@AmeyaDeshpande有时你只需要别人的一双眼睛就能解决这个错误：）有那么一会儿，我想说，“你用一个目标绑定了一个文档，这个目标还没有在匿名函数中插入DOM。”注意，我为锚“X”本身添加了onlick代码。

(function ( $ ) { 
$(document).ready(function(){
     $(".btn-add").on("click",function() {
         var $row = $(this).closest("tr"); // Find the row
         var $text = $row.find(".this-name").text(); // Find the text
         // Let's test it out
         $('#col2').append('<div class="item"><p>'+$text+'</p><a href="#" class="delete-button" onClick="$(this).parent().remove();">X</a></div>');
     });
});
$(document).on('click','.delete-button', function(e){
    e.preventDefault();
    alert('yes');
    $(this).closest('.item').remove();
});
}( jQuery ));