удалить родительский элемент при нажатии

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 s 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

Вы должны прикрепить событие щелчка динамически. Live может быть хорошим выбором. Попробуйте это.

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