estoy haciendo un ejercicio de una todo list. Estoy en el último paso, borrar los elementos de la lista en la local storage.
Este es el código que tengo:
function removeLocalTodos(todo) {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
const todoIndex = todo.children[0].innerText;
todos.splice(todos.indexOf(todoIndex), 1);
localStorage.setItem("todos", JSON.stringify(todos));
}
Mi función deleteCheck es:
function deleteCheck(e) {
const item = e.target;
//delete todo
if (item.classList[0] === "trash-btn") {
const todo = item.parentElement;
//animation
todo.classList.add("fall");
removeLocalTodos(todo);
todo.addEventListener("transitionend", function() {
todo.remove();
});
}
//check mark
if (item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
}
}
En teoría está bien, o por lo menos lo veo igual que el video que estaba siguiendo. Pero cuando borro un elemento, en la array de la local storage se borra el último item y no el item que yo borré. Y cuando actualizo la página no aparecen los items que se borraron de la array, pero si vuelven a aparecer los elementos que yo había borrado. Por ejemplo, si en la página de la todo list yo cree los elementos: a b c d e
Y borro b y d, en la array se borran d y e. Cuando actualizo la página aparecen a, b y c. ¿Alguien sabe cuál puede ser el error?
console.log()
los valores que vas obteniendo en cada paso del proceso. Por ejemplo, averiguar qué recibes entodo
, qué hay entodos
, y qué valor obtienes entodoIndex
. Tras revisar los datos, nos cuentas. Saludos!indexOf
está retornando -1 (no encontrado) y -1 para el splice le dice que empice por el final.if (localStorage.getItem("todos") === null)
? Si así fuera, tal vez no seanull
el valor apropiado a comparar, sinoundefined
... Son ideas.