1

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?

8
  • Hola y bienvenido! Te sugiero ir depurando mediante console.log() los valores que vas obteniendo en cada paso del proceso. Por ejemplo, averiguar qué recibes en todo, qué hay en todos, y qué valor obtienes en todoIndex. Tras revisar los datos, nos cuentas. Saludos!
    – quinqui
    Commented el 28 jul. 2021 a las 23:46
  • Si te borra siempre el último, entonces, el indexOf está retornando -1 (no encontrado) y -1 para el splice le dice que empice por el final. Commented el 29 jul. 2021 a las 3:39
  • Hola Juan Carlos, lo raro es que en el código dice todo.children[0].innerText , entonces por qué tomaría -1? O no es de ahí que me está tomando el index? Y tenés idea cómo podría corregir para que tome el index de lo que yo estoy borrando? Muchas gracias. Commented el 29 jul. 2021 a las 12:06
  • @quinqui probé y recibí este error: Uncaught ReferenceError: Cannot access 'todos' before initialization at removeLocalTodos (app.js:136) at HTMLUListElement.deleteCheck (app.js:51) Acabo de poner en el código la función deleteCheck para que puedas ver cómo está hecha. Muchas gracias. Commented el 29 jul. 2021 a las 12:41
  • Podrías averiguar en que línea del código corresponde la nº136, que es donde te salta el mensaje de error? ¿Será en esta tal vez if (localStorage.getItem("todos") === null) ? Si así fuera, tal vez no sea null el valor apropiado a comparar, sino undefined... Son ideas.
    – quinqui
    Commented el 31 jul. 2021 a las 2:02

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.