He visto algunas otras publicaciones sobre esto, pero no he podido encontrar nada que coincida con el problema que tengo. Es una lista básica de tareas con vanilla js

 let x = document.querySelectorAll(".x"); let li = document.querySelectorAll("li"); let ul = document.querySelector("ul"); let add = document.querySelector(".add"); let input = document.querySelector(".input"); let span = document.querySelector("span"); add.addEventListener("click", () => { const newLi = document.createElement("li"); ul.appendChild(newLi); let newSpan = document.createElement("span"); newSpan.classList.add("x"); newSpan.innerText = "X"; newLi.innerHTML = input.value; newLi.appendChild(newSpan); }); for (let i = 0; i < x.length; i++) { x[i].addEventListener("click", (e) => { if (e.target.classList.contains("x")) { e.target.parentNode.remove("li"); } }); }

Pensé que estaba siendo inteligente con el ciclo for para seleccionar todos los nombres de clase de ".x" y luego usarlo para eliminar el nodo principal de "li".

el problema aquí es cuando estoy agregando un nuevo elemento a la lista, el controlador de eventos no se le está aplicando.

Busqué alguna delegación de eventos pero no parece estar funcionando. cualquier sugerencia es apreciada.