Мы нашли проблему — длина коллекции items не меняется при удалении задач из списка. Почему так происходит?

querySelectorAll находит необходимые элементы один раз, фиксирует их и всё. Эта запись остаётся статичной и изменения в DOM на неё никак не влияют. Можно сказать, что querySelectorAll работает, как любая переменная, в которую мы записали какое-нибудь значение. Пока мы не переопределим переменную, в ней так и будет находиться то значение, которое мы в неё записали, независимо от того, что происходит в коде.

Поэтому такая коллекция называется статичной.

Кроме статичных существуют живые коллекции элементов, их ещё называют динамическими. Динамические коллекции реагируют на изменения в DOM. Если один из элементов коллекции будет удалён из DOM, то он пропадёт и из коллекции. Есть несколько способов с помощью которых можно получить живую коллекцию, один из них children. Он вызывается на родительском элементе и собирает все дочерние элементы в динамическую коллекцию. Синтаксис такой:

parentElement.children;

Проверим на практике, как работают живые коллекции. Заменим querySelectorAll на children в нашем коде и проверим, как будет работать программа.