En el código JS, hay una parte que imprime una cierta cantidad de elementos, y al lado de cada elemento hay un ícono para eliminar el elemento al lado:
<img src="images/remove.png" class="remove" onClick="remove_item(${index})"> Por lo tanto, cuando el usuario haga clic en un contenedor, la función a continuación eliminará el elemento al lado. El punto es que los elementos deben almacenarse en una matriz llamada list . Por lo tanto, el elemento se eliminará de la list . La función render es para imprimir los elementos nuevamente.
function remove_item(index) { list.splice(index, 1); localStorage.setItem('list', JSON.stringify(list)); render(list); El código que está arriba funciona perfectamente. Sin embargo, el problema es que la tarea debe realizarse mediante eventListener. Para esa parte de img se edita como a continuación.
<img src="images/remove.png" class="remove" data-index="${index}"> Y la parte que eliminará el elemento de la list es la siguiente.
let remove = document.querySelectorAll(".remove"); Array.from(remove).forEach((el) => { el.addEventListener('click', function() { let index = el.getAttribute('data-index'); list.splice(index, 1); render(list); localStorage.setItem('list', JSON.stringify(list)); })});El problema es que el código funciona solo cuando la página se actualiza antes de cada clic en cualquier ícono. Entonces, después de hacer clic en el ícono, tengo que actualizar y luego hacer clic nuevamente para eliminar algún otro elemento. ¿Cómo puedo arreglar eso?
Cuando vuelve a representar la lista, todos los elementos se reemplazan, lo que elimina los controladores de eventos. Probablemente debería eliminar el elemento real:
el.addEventListener('click', function() { let index = el.getAttribute('data-index'); list.splice(index, 1); el.remove(); localStorage.setItem('list', JSON.stringify(list)); })});O eso o ejecutar el código nuevamente después del procesamiento que adjunta los controladores de eventos. Lo que tenga más sentido con la forma en que estás renderizando.