Tengo un script a continuación, donde creo dinámicamente un nodo de elemento de tipo 'li'. Este addMovieHandler() se llama cada vez que el usuario hace clic en un botón.

Además, el elemento de la lista recién agregado debe eliminarse al hacer 'clic'.

Entonces, lo que experimenté es que agregué un Event Listener en el objeto local newLi y también lo pasé a la función deleteMovieHandler() .

Y funciona. Agregué varios elementos de la lista y cuando hice clic en cualquiera, desapareció de la pantalla.

 const movieList = document.getElementById('movie-list'); const deleteMovieHandler = (newLi) => { newLi.style.display = 'none'; } const addMovieHandler = (image) => { const newLi = document.createElement('li'); newLi.className = 'movie-element'; newLi.innerHTML = ` <div class = "movie-element__image"> <img src="${image}"></img> </div> `; newLi.addEventListener('click', deleteMovieHandler.bind(this, newLi)); movieList.appendChild(newLi); }

Entiendo que esta es una mala práctica simplemente ocultar el elemento, lo que se convierte en un desperdicio de recursos.

Pero el centro de interés es que había un detector de eventos separado en cada elemento de la lista, aunque ese objeto local debería haberse perdido después de la finalización de la función.