Событие клика js работает не корректно

Question

При нажатии на клавишу 46 т.е delete происходит удаление всего списка задач. А, нужно удалять только последнюю, прописано removeChild, вроде как и должно быть. Как можно сделать чтоб удалялась только последняя задача.

https://codepen.io/igor-solodownik/pen/vYxXxBp

   document.addEventListener('keydown', function(event) {
      if (event.keyCode === 46) {
         todoList.removeChild(newTask); 
      }
   })

const todoList = document.querySelector('.todo__list');
const myForm = document.querySelector('.todo__form');
const inputTask = document.querySelector('.form__input');
const priorityButton = document.querySelector('.form__btn-priority');



myForm.addEventListener('submit', function(event) {
  event.preventDefault();

  //Создаем новый li и заливаем в него значения инпута
  let newTask = document.createElement('li');
  newTask.textContent = inputTask.value;
  todoList.append(newTask);
  inputTask.value = '';


  //Создаем кнопку удаления и добавляем ее в newTask
  let buttonDeleteTask = document.createElement('button');
  buttonDeleteTask.textContent = 'Удалить'
  buttonDeleteTask.classList.add('btn-del');
  newTask.append(buttonDeleteTask);

  //Проверяет наличие приоритета у класса у кнопки, если класс есть, добавляет его новой задаче.
  if (priorityButton.classList.contains('is-important')) {
    newTask.classList.add('is-important');
  }

  //Удаляет задачу по клику на кнопку "Удалить"
  buttonDeleteTask.addEventListener('click', function() {
    todoList.removeChild(newTask);
  });


  //Удаляет задачу при нажатии на кнопку "Delete"
  document.addEventListener('keydown', function(event) {
    if (event.keyCode === 46) {
      todoList.removeChild(newTask);
    }
  })
});


//Добавляет и удаляет класс приоритета для кнопки, меняет текстовое содержимое.
priorityButton.addEventListener('click', function() {
  this.classList.toggle('is-important')
  if (this.classList.contains('is-important')) {
    this.textContent = 'Важная задача'
  } else {
    this.textContent = 'Обычная задача'
  }
});

* {
  box-sizing: border-box;
}

body {
  font-family: "Verdana", "Tahoma", sans-serif;
  font-style: 16px;
  padding: 0;
  margin: 0;
}

.todo {
  background-color: #f0f0f0;
  max-width: 800px;
  margin: 50px auto;
  padding-bottom: 20px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

.todo__title {
  color: #fff;
  background-color: #18c8ff;
  padding: 11px 20px;
  margin: 0;
}

.form__input {
  width: 95%;
  height: 40px;
  display: block;
  margin: 0 auto;
  font-size: inherit;
  outline: none;
  padding: 0 10px;
  margin-bottom: 20px;
}

.form__btn-priority {
  display: block;
  position: relative;
  margin: 0 0 20px 20px;
  font-size: 18px;
  width: 210px;
  height: 40px;
  border: none;
  color: #18c8ff;
  cursor: pointer;
}

.form__btn-priority:hover {
  background-color: rgb(233, 235, 251);
}

.form__btn-priority::before {
  content: url("img/arrow1.png");
  position: absolute;
  left: 10px;
  top: 10px;
}

.form__btn-priority.is-important {
  color: #ffad32;
}

.form__btn-priority.is-important::before {
  content: url("img/arrow2.png");
}

.form__btn-add {
  display: block;
  margin: 0 0 0 20px;
  font-size: 18px;
  width: 210px;
  height: 40px;
  border: none;
  background-color: #18c8ff;
  color: #fff;
  cursor: pointer;
}

.todo__list {
  counter-reset: myCounter;
  padding: 0;
  margin: 0 0 20px 0;
}

.todo__list li {
  color: #18c8ff;
  background-color: #fff;
  padding: 10px 10px;
  list-style: none;
  margin-bottom: 1px;
}

li.is-important {
  color: #fff;
  background-color: #ffad32;
}

li.is-important::before {
  border: 1px solid #fff;
}

li::before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: inherit;
  border: 1px solid #18c8ff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 30px;
  width: 30px;
  height: 30px;
}

li {
  position: relative;
}

.btn-del {
  position: absolute;
  top: 50%;
  right: -3%;
  transform: translate(-50%, -50%);
  background-color: red;
  border: 1px solid rgb(102, 0, 0);
  color: white;
  cursor: pointer;
  padding: 5px 15px;
}

<div class="todo">
  <h1 class="todo__title">Список моих дел:</h1>
  <form class="todo__form" action="#">
    <ol class="todo__list">
    </ol>
    <input class="form__input" type="text" placeholder="Запишите новую задачу" required>
    <button class="form__btn-priority" type="button">Обычная задача</button>
    <button class="form__btn-add" type="submit">Добавить в список</button>
  </form>
</div>

Answer 1

myForm.addEventListener('submit', function(event){
  ...
  //document.addEventListener('keydown', function(event) {
  //  ...
  //});
});
document.addEventListener('keydown', function(event) {
  if (event.keyCode === 46 && todoList.lastChild) {
    todoList.removeChild(todoList.lastChild); 
  }
});

Вы добавляете новый обработчик keydown на создание каждого элемента, захватывая переменную элемента newTask в замыкание. А потом все эти обработчики выстреливают на один keydown.

БЛОГ НА HUSL

Событие клика js работает не корректно

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