Agregué 3 tareas, por ejemplo, "Tarea 1", "Tarea 2", "Tarea 3", y luego eliminé una de ellas. Al presionar la papelera de reciclaje, la tarea se eliminará, pero cuando agregue la nueva tarea "Tarea 4", la tarea eliminada también se restaurará.
¿Cómo lo arreglo? Por favor agregue una explicación si es posible?
'use strict'; const headerInput = document.querySelector('.header-input'); const todoControl = document.querySelector('.todo-control'); const todoList = document.querySelector('.todo-list'); const todoCompleted = document.querySelector('.todo-completed'); const todoData = []; const render = function() { todoList.textContent = ''; todoCompleted.textContent = ''; todoData.forEach(function(item){ const li = document.createElement('li'); li.classList.add('todo-item'); li.innerHTML = '<span class="text-todo">' + item.value + '</span>' + '<div class="todo-buttons">' + '<button class="todo-remove"></button>' + '<button class="todo-complete"></button>' + '</div>'; if(item.completed){ todoCompleted.append(li); } else { todoList.append(li); } const btnTodoCompleted = li.querySelector('.todo-complete'); btnTodoCompleted.addEventListener('click', function(){ item.completed = !item.completed; render(); }) const btnRemove = li.querySelector('.todo-remove'); btnRemove.addEventListener('click', function(){ li.remove(); }); }); }; todoControl.addEventListener('submit', function(event){ event.preventDefault(); const newTodo = { value: headerInput.value, completed: false }; todoData.push(newTodo) render(); }); render();Cuando crea una nueva tarea, agrega un registro a la matriz:
todoData.push(newTodo) Pero cuando elimina una tarea, no modifica la matriz. Simplemente elimine el elemento <li> de la página:
li.remove(); Entonces, la próxima vez que se llame a render() , volverá a representar la lista de la matriz que aún contiene el registro "eliminado".
En lugar de eliminar el elemento <li> , elimine el registro de la matriz y vuelva a invocar render() :
btnRemove.addEventListener('click', function(){ // re-assign the array to a filtered version of itself todoData = todoData.filter(function (i) { // only return records which don't match the current record return item.value !== i.value; }); // re-render the list render(); });