时间戳

首页 > 解决方案 > 单击时删除父元素

javascript - 单击时删除父元素

问题描述

$('#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>

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

标签： javascriptjquery

解决方案

由于您尝试在动态创建的元素上附加事件，请尝试使用使用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>

推荐阅读