Как исправить Uncaught TypeError: Cannot read properties of null (reading 'remove')?

Question

[T1tle]

Делал задание по курсу и возникла ошибка

Uncaught TypeError: Cannot read properties of null (reading 'remove')
    at HTMLButtonElement.<anonymous>

const todoList = document.querySelector('#todo-list');
const todoForm = document.querySelector('#todo-form');
const todoInput = document.querySelector('#todo-input');

todoForm.addEventListener('submit', formHandler)

function formHandler(event) {
    event.preventDefault();
    const taskText = todoInput.value;

    // const li = `<li>${taskText}</li>`;

    const newTask = document.createElement('li');
    newTask.innerText = taskText;

    const deleteBtn = document.createElement('button');
    deleteBtn.setAttribute('role', 'button');
    deleteBtn.innerText = 'remove';
    deleteBtn.style['margin-left'] = '15px';

    deleteBtn.addEventListener('click', function() {
        this.closest('li').remove();
    });

    todoList.append(newTask);
    todoList.append(deleteBtn);

    // todoList.insertAdjacentHTML('beforeend', li)

    todoInput.value = '';

    todoInput.focus();
}

Comments

[edward_freedom]

на тот элемент, на который ругается, проверь его на наличие

Answer 1

[betterthanyouthink]

У вас deleteBtn лежит на одном уровне с <li>. Положите её внутрь и будет вам счастье :)
исправьте todoList.append(deleteBtn); на newTask.append(deleteBtn);

Element.closest()

Comments

[T1tle]

Спасибо большое!