Soy un programador principiante y estoy trabajando en mi primer proyecto pequeño. Decidí hacer una aplicación de notas. Básicamente está completo, excepto que quería tener un botón para eliminar todas las tareas completadas y tengo problemas con él. Básicamente, funciona en localStorage, donde almaceno el nombre de la tarea como una clave, con un valor de 0 (incompleto) o 1 (completado). En esta última función, quiero eliminar todas las tareas con valor localStorage de 1. Este es mi código. Una vez que lo ejecuto, tengo problemas para eliminar todos los elementos li. algunos se eliminan, otros no. En la consola, veo dos errores de tableChild que no se declaran. parece raro
document.querySelector(".btn-delete-completed").addEventListener("click", function () { let children = listOfTasks.children; /*takes an ul element (listOfTasks) and selects its child elements*/ let arrayLenght = children.length; /*variable to see the lenght of the created arrray*/ let tableChild = 0; /*creates a variable that will be redeclared in the loop dynamically*/ for (let i = 0; i < arrayLenght; i++) { /*for loop that takes a stative arrayLenght instead of dynamic one(since we will be deleting elements)*/ tableChild = children[i]; /*redeclares a tableChild variable to a single li with the text that is a key to localStorage*/ if (localStorage.getItem(tableChild.textContent) == 1) {/*Checks for the value in localStorage, getItem() uses the key that is text of the selected element*/ tableChild.remove();/*removes the element from html*/ localStorage.removeItem(tableChild.textContent); /*removes element from localStorage*/ } } });Aquí está. Espero que la documentación sea lo suficientemente buena. Como dije, solo soy un principiante y estoy publicando aquí por primera vez. ¡Si tienes alguna pregunta, con gusto te la responderé en los comentarios! Una vez más, lo siento si arruiné algo en esta publicación.
¡Gracias por adelantado!
Cuando elimina elementos de una matriz, su longitud cambia. Esto no se tiene en cuenta en su código.
Me resulta más fácil iterar hacia atrás en ese caso:
for (let i = children.length - 1; i >= 0; i--){ //...