单击时删除父元素

Question

 $('#add').click(function () { let task = $('<div class="task"></div>'); let name_des = $('<div class="name_description"></div>'); let name = $('<div class="name"></div>'); name.append('<div id="taskName"></div>', '<div id="taskTime"></div>'); name_des.append(name, '<div class="description"></div>'); task.append('<input type="checkbox">', name_des, '<small id="delete">Delete</small>'); $('#taskCont').append(task); }); $('#delete').click(function (){ $(this).parent().remove(); });

 #taskCont{ /* background: yellow; */ display: flex; align-items: center; justify-content: center; flex-direction: column; }.task{ width: 300px; height: 50px; background: red; display: flex; align-items: center; justify-content: center; }.task:not(:first-child){ margin-top: 10px; }.task > *{ border: 1px solid white; }.task > *:not(:nth-child(2)){ width: auto; margin: 10px; }.name_description{ display: flex; align-items: center; justify-content: center; height: 20px; }.name_description *{ height: 20px; background: green; border: 2px solid yellow; }.name{ display: flex; align-items: center; justify-content: center; flex-direction: column; }.name > *{ height: 20px; border: 2px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">add</button> <div id="taskCont"></div>

在这段代码中，为什么删除按钮不起作用？ 如何在这里删除父元素？

Answer 1

由于您尝试在动态创建的元素上附加事件，请尝试使用使用 jQuery 的on()的委托方法。 这会将事件附加到稍后添加到 DOM 的元素。

改变：

$('#delete').click(function (){

至：

$('body').on('click', '#delete', function (){

 $('#add').click(function () { let task = $('<div class="task"></div>'); let name_des = $('<div class="name_description"></div>'); let name = $('<div class="name"></div>'); name.append('<div id="taskName"></div>', '<div id="taskTime"></div>'); name_des.append(name, '<div class="description"></div>'); task.append('<input type="checkbox">', name_des, '<small id="delete">Delete</small>'); $('#taskCont').append(task); }); $('body').on('click', '#delete', function (){ $(this).parent().remove(); });

 #taskCont{ /* background: yellow; */ display: flex; align-items: center; justify-content: center; flex-direction: column; }.task{ width: 300px; height: 50px; background: red; display: flex; align-items: center; justify-content: center; }.task:not(:first-child){ margin-top: 10px; }.task > *{ border: 1px solid white; }.task > *:not(:nth-child(2)){ width: auto; margin: 10px; }.name_description{ display: flex; align-items: center; justify-content: center; height: 20px; }.name_description *{ height: 20px; background: green; border: 2px solid yellow; }.name{ display: flex; align-items: center; justify-content: center; flex-direction: column; }.name > *{ height: 20px; border: 2px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">add</button> <div id="taskCont"></div>

Answer 2

您应该动态附加点击事件。 直播可能是个不错的选择。 尝试这个。

 $(selector).live( eventName, function(){} );