Tasks restores after deletion

I added 3 tasks, for example "Task1", "Task2", "Task3", then remove one of them, pushing on recyckle bin, task will be removed, BUT! When I add new task "Task4", removed task will be restored too. How to fix it please, than removed item will not be restored, with an explanation if possible?

Thank you.

'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();

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW