jquery - jQuery 问题 - $(this).parent().remove();

Question

我在这里找到了许多问题的解决方案，但仍然无法找到这个问题的答案。我有一个容器，我正在使用 jQuery 在其中动态添加另一个元素。在添加的 div 里面我有一个按钮，所以当我单击该按钮时我想要删除该按钮。这是我到目前为止没有成功的尝试。

HTML

<div id="menuContainer">
<ul id="menu">
    <li><a href="#" id="addColumn">add Element (max 5)</a></li>
    <li><a href="#" id="addCard">---</a></li>
    <li><a href="#" id="delColumn">---</a></li>
    <li><a href="#" id="delCard">---</a></li>
    <li><a href="#" id="tblReset">---</a></li>
</ul>
</div>
<div id="columns" style="width: 1000px;"></div>

jQuery：

$(function() {
var columns = $('.column').size();

$('a#addColumn').click(function() {
    if (columns < 5) {                  
    var columnName = prompt('Внесете назив за колоната: ');
    var temp = columns + 1;
    $('<div class="column">' + columnName + '<button id="' + temp + '" style="float:right;" class="btnRemoveColumn">X</button></div>').appendTo('div#columns');
    columns++;
}
else { 
    alert("Имате максимален број на колони во таблата");
}
});

$(".btnRemoveColumn").click(function(){
    $(this).parent().remove();
});              
});

所有带有 CSS 的东西都可以在外部网站 Fiddle 上试用，所以看看所有（不）是如何工作的。链接在这里

Answer 1

$(document).on("click", ".btnRemoveColumn", function() {

对于动态元素，应该委托事件。