После добавления элемента через JQuery, он работает неправильно (не удаляется)

Question

Нужно сделать to-do list, который добавляет новые задачи и удаляет при нажатии на изображение с классом "krest". Получается удалять созданные ранее задачи, но когда добавляешь новую через конструктор, то её уже не получается удалить. Подскажите, что не так, пожалуйста.

$(function() {
  $('.krest').click(function() {
    $(this).parents('.toDo').remove();
  });

  $('button').click(function() {
    var taskDescription = $('textarea').val();
    var taskName = $('input').val();
    console.log(taskName, taskDescription);
    var task = $('<div class="toDo"></div>')
      .append('<h4>' + taskName + '</h4>')
      .append('<img class="krest" src="krest.png">')
      .append('<hr>')
      .append('<p>' + taskDescription + '</p>');
    $('#tasks').prepend(task);
  });

});

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  min-width: 960px;
  font-family: Arial;
}

#main-container {
  width: 960px;
  margin: 0 auto 0 auto;
}

form {
  width: 470px;
  float: right;
  padding: 0;
  height: 500px;
  background-color: white;
}

form input {
  width: 390px;
  margin-left: 40px;
  background-color: #fcfcfc;
  border: 1px solid #f6f6f6;
  outline: none;
}

form textarea {
  width: 390px;
  height: 230px;
  resize: none;
  margin-left: 40px;
  background-color: #fcfcfc;
  border: 1px solid #f6f6f6;
  outline: none;
}

form p {
  color: #8993ad;
  margin-left: 40px;
  font-size: 14px;
  margin-top: 30px;
}

form button {
  width: 224px;
  margin-left: 40px;
  height: 55px;
  background-color: #2174fd;
  color: white;
  border: none;
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 30px;
}

header {
  width: 960px;
  margin: 0 auto 0 auto;
  height: 114px;
  font-size: 21px;
}

#headerLeft {
  width: 470px;
  float: left;
  padding: 0;
  display: inline-block;
}

#headerRight {
  width: 470px;
  float: right;
  padding: 0;
  display: inline-block;
}

.toDo {
  overflow: hidden;
  width: 470px;
  height: 136px;
  margin-bottom: 20px;
  font-size: 16px;
  background-color: white;
}

.toDo h4 {
  margin-left: 20px;
  margin-top: 18px;
  font-weight: normal;
  display: inline-block;
}

.toDo img {
  display: inline-block;
  margin-left: 22px;
}

.toDo p {
  margin-left: 20px;
  margin-top: 18px;
  font-size: 14px;
  color: #8993ad;
}

hr {
  border: none;
  background-color: #f6f6f6;
  color: #f6f6f6;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">

<head>
  <title>Homework Skillbox</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <header>
    <p id='headerLeft'>Список дел:</p>
    <p id='headerRight'>Добавить новое дело</p>
  </header>
  <div id="main-container">
    <form>
      <p>* Название </p>
      <input type="text" name="title">
      <p>* Описание </p>
      <textarea></textarea>
      <button type="button">Добавить дело</button>
    </form>
    <div id="tasks">
      <div class='toDo'>
        <h4>Купить</h4>
        <img class="krest" src="krest.png">
        <hr>
        <p>и</p>
      </div>
      <div class='toDo'>
        <h4>Позвонить маме</h4>
        <img class="krest" src="krest.png">
        <hr>
        <p>позвать в кино</p>
      </div>
      <div class='toDo'>
        <h4>Прочитать книгу</h4>
        <img class="krest" src="krest.png">
        <hr>
        <p>Замок</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

Обратите внимание, у вас удаляется всё, кроме новых "задач", так происходят, потому что обработчик вешается на те элементы, которые есть по факту, в момент когда прочитается код.
Когда вы создаёте новые "задачи", ваш код не знает о новых элементах, которые нужно слушать.

Самое простое решение - Делегирование событий.

Раз вы используйте jQuery, вот ваше решение:

$(function() {
  $('#tasks').on('click', '.krest', function() {
    $(this).parents('.toDo').remove();
  });

  $('button').click(function() {
    var taskDescription = $('textarea').val();
    var taskName = $('input').val();
    console.log(taskName, taskDescription);
    var task = $('<div class="toDo"></div>')
      .append('<h4>' + taskName + '</h4>')
      .append('<img class="krest" src="krest.png">')
      .append('<hr>')
      .append('<p>' + taskDescription + '</p>');
    $('#tasks').prepend(task);
  });

});

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  min-width: 960px;
  font-family: Arial;
}

#main-container {
  width: 960px;
  margin: 0 auto 0 auto;
}

form {
  width: 470px;
  float: right;
  padding: 0;
  height: 500px;
  background-color: white;
}

form input {
  width: 390px;
  margin-left: 40px;
  background-color: #fcfcfc;
  border: 1px solid #f6f6f6;
  outline: none;
}

form textarea {
  width: 390px;
  height: 230px;
  resize: none;
  margin-left: 40px;
  background-color: #fcfcfc;
  border: 1px solid #f6f6f6;
  outline: none;
}

form p {
  color: #8993ad;
  margin-left: 40px;
  font-size: 14px;
  margin-top: 30px;
}

form button {
  width: 224px;
  margin-left: 40px;
  height: 55px;
  background-color: #2174fd;
  color: white;
  border: none;
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 30px;
}

header {
  width: 960px;
  margin: 0 auto 0 auto;
  height: 114px;
  font-size: 21px;
}

#headerLeft {
  width: 470px;
  float: left;
  padding: 0;
  display: inline-block;
}

#headerRight {
  width: 470px;
  float: right;
  padding: 0;
  display: inline-block;
}

.toDo {
  overflow: hidden;
  width: 470px;
  height: 136px;
  margin-bottom: 20px;
  font-size: 16px;
  background-color: white;
}

.toDo h4 {
  margin-left: 20px;
  margin-top: 18px;
  font-weight: normal;
  display: inline-block;
}

.toDo img {
  display: inline-block;
  margin-left: 22px;
}

.toDo p {
  margin-left: 20px;
  margin-top: 18px;
  font-size: 14px;
  color: #8993ad;
}

hr {
  border: none;
  background-color: #f6f6f6;
  color: #f6f6f6;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">

<head>
  <title>Homework Skillbox</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <header>
    <p id='headerLeft'>Список дел:</p>
    <p id='headerRight'>Добавить новое дело</p>
  </header>
  <div id="main-container">
    <form>
      <p>* Название </p>
      <input type="text" name="title">
      <p>* Описание </p>
      <textarea></textarea>
      <button type="button">Добавить дело</button>
    </form>
    <div id="tasks">
      <div class='toDo'>
        <h4>Купить</h4>
        <img class="krest" src="krest.png">
        <hr>
        <p>и</p>
      </div>
      <div class='toDo'>
        <h4>Позвонить маме</h4>
        <img class="krest" src="krest.png">
        <hr>
        <p>позвать в кино</p>
      </div>
      <div class='toDo'>
        <h4>Прочитать книгу</h4>
        <img class="krest" src="krest.png">
        <hr>
        <p>Замок</p>
      </div>
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

После добавления элемента через JQuery, он работает неправильно (не удаляется)

Ответы (1 шт):