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