Помогите пож. разобраться с поведением js / html

не могу понять логики, почему происходит такая ерунда. Сейчас мой туду лист, работает корректно. Новые задачи без проблем создаются через javascript и все отлично. Но, стоит закомментировать или убрать эту часть в html как все ломается:

<li>Купить молоко
  <button class="btn-del">Удалить</button>
</li>

Не могу понять, почему такое происходит. Т.е для того, чтоб все корректно работало, нужно чтоб хотя бы один список с кнопкой были. И js будет добавлять столько li сколько нужно. Но, почему для корректной работы нужен первый li в разметке. Ведь он должен сам создавать их, в js так и прописал.

Буду благодарен за совет более опытных разработчиков.

(И если не затруднит, подскажите, как можно через js, сделать чтоб при клике на кнопку "удалить" созданную в html li так же удалялась)

https://codepen.io/igor-solodownik/pen/vYxXxBp

const todoList = document.querySelector('.todo__list');
const myForm = document.querySelector('.todo__form');
const inputTask = document.querySelector('.form__input');
const priorityButton  = document.querySelector('.form__btn-priority');



myForm.addEventListener('submit', function(event){
   event.preventDefault();

   //Создаем новый li и заливаем в него значения инпута
   let newTask = document.createElement('li');
   newTask.textContent = inputTask.value;
   todoList.append(newTask);
   inputTask.value = '';


   //Создаем кнопку удаления и добавляем ее в newTask
   let buttonDeleteTask = document.createElement('button');
   buttonDeleteTask.textContent = 'Удалить'
   buttonDeleteTask.classList.add('btn-del');
   newTask.append(buttonDeleteTask);

   //Проверяет наличие приоритета у класса у кнопки, если класс есть, добавляет его новой задаче.
   if (priorityButton.classList.contains('is-important')){
      newTask.classList.add('is-important');
   }

   //Удаляет задачу по клику на кнопку "Удалить"
   buttonDeleteTask.addEventListener('click', function() {
      todoList.removeChild(newTask);
   });


   //Удаляет задачу при нажатии на кнопку "Delete"
   document.addEventListener('keydown', function(event) {
      if (event.keyCode === 46) {
         todoList.removeChild(newTask); 
      }
   })
});


//Добавляет и удаляет класс приоритета для кнопки, меняет текстовое содержимое.
priorityButton.addEventListener('click', function() {
   this.classList.toggle('is-important')
   if (this.classList.contains('is-important')){
      this.textContent = 'Важная задача'
   } else {
      this.textContent = 'Обычная задача'
   }
});