Estoy planeando crear una lista simple de tareas pendientes para enseñar a mis alumnos (también soy muy nuevo en 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); }¡Quiero que los elementos de la lista se eliminen cuando haga clic en ellos! ¿Cómo creo dinámicamente un evento y lo vinculo al elemento de lista creado?
Adjunte un solo detector de eventos al elemento de la lista para capturar eventos de los elementos de su lista a medida que "burbujean" el DOM, y luego agregue una clase al elemento en el que se hizo clic que establece su visualización en 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>