Создание списка дел с помощью javascript (как удалить функцию, просто щелкнув по элементу списка?)

#javascript #html #dom

Вопрос:

Я планирую создать простой список дел для обучения своих студентов (я также новичок в JS)

 function createlist() {
  let x = document.forms["todo"]["thing"].value;
  var head = document.createElement("li");
  head.innerText = x;
  head.style.color = "red";
  head.setAttribute("id", "listid");
  document.getElementById("myUL").appendChild(head);
}
 

Я хочу, чтобы элементы списка удалялись при нажатии на них!
Как мне динамически создать событие и связать его с созданным элементом списка?

Ответ №1:

Прикрепите к элементу списка один прослушиватель событий, чтобы перехватывать события из ваших элементов списка, когда они «всплывают» в DOM, а затем добавьте класс к выбранному элементу, который устанавливает его отображение none .

 const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  e.target.classList.add('deleted');
} 
 .deleted { display: none; }
li:hover { cursor: pointer; color: blue; } 
 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>