After adding 3 tasks like "Task1", "Task2", and "Task3", I accidentally removed one of them by pushing the recycle bin. To my surprise, when I added a new task "Task4", the previously removed task was restored as well. How can I fix this issue? Any explanations would be greatly appreciated.
'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();