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

Question

[Fillin54]

При создании TODO List'а столкнулся с такой ошибкой - Uncaught TypeError: Cannot read property 'remove' of null. У меня работает добавление заметок, они получают уникальный ID, но когда я пытаюсь удалить заметку выскакивает ошибка. Код посмотреть полностью можно здесь - JSFiddle - https://jsfiddle.net/Fillin/j1xqpmwh/

Comments

[smilingcheater]

event.target.parentElement для кнопки удаления - это форма, а не div data-key=...

используйте event.target.closest('[data-key]')

Answer 1

[Вадим]

Мой хрустальный шар подсказывает, что ошибка у Вас на строке
item.remove();

В таком случае, из текста ошибки не сложно догадаться, что
document.querySelector(`[data-key='${todo.id}']`); - возвращает null. То есть в DOM нет такого элемента.

А происходит так потому что Вы в обработчике клика смотрите на родительский элемент кнопки, коим является форма, у которой нет data-key.

const item = event.target.parentElement.dataset.key; // undefined

А нужно смотреть выше на div.
что-то вроде:

const item = event.target.closest('[data-key]').dataset.key;

Профит.

Comments

[Fillin54]

Огромное спасибо, даже не подумал об этом!

[Вадим]

Fillin54, если ответ, данный на Ваш вопрос Вам подходит и является решением - нажимайте под ответом соответствующую кнопку "Отметить решением" чтобы другие участники сервиса знали, что на этот вопрос уже дан подходящий ответ и не тратили своё время. А так же это может помочь людям с похожим вопросом.