Ответ на поставленный вопрос «Почему?» — потому, что из LocalStorage вытаскиваете HTML разметку и вставляете её, но слушатели событий к элементам не привязаны. Только при создании новой задачи у вас срабатывает
b1.addEventListener('click', () => {
Стоит разделять данные и их отображение.
У todo приложения данные – это массив задач. Данные сохраняются в LS. Задача, минимально, это строка текста.
Текстовое поле, кнопка для удаления — это всё уже мишура, отображение. Генерится динамически из данных.
Три штуки в этом приложении:
- массив с задачами (задача просто строка, что там ввел юзер)
- отрисовка интерфейса из массива
- изменение массива через действия в интерфейсе
И работают они по кругу )
Что-то изменили – изменился массив – отрисовалось с нуля заново всё, как при первой загрузке.
Так не накосячите со слушателями событий, в том числе.
Но придётся усложнить данные: не просто строки, ещё и состояние выполнено/не_выполнено.
К примеру, можно так держать данные:
const tasks = [
{text: "Заварить кофе", isDone: false},
{text: "Пожарить яичницу", isDone: false},
{text: "продрать глаза", isDone: true},
];
Сохранять в LS сериализованный в JSON этот массив:
const itemKey = 'tasks';
localStorage.setItem(itemKey, JSON.stringify(tasks));