Как удалить список дел в списке дел?

Вы можете назначить событие onclick кнопке сразу после ее создания и перед добавлением в div. Обработчик - это просто функция, в которой вы удаляете созданные элементы. Вы можете проверить код ниже.

Я также заменил одну из ваших строк на delButton.classList.add("id", "delToDo");, так как идентификаторы элементов DOM должны быть уникальными.

const addButton = document.querySelector("#addToDo");
const delBtn = document.querySelector("#delToDo");
addButton.addEventListener("click", addTask, false);

function addTask() {
  const textToDo = document.querySelector("#toDo").value;
  var list = document.querySelector(".list");

  var divToDo = document.createElement("div");
  var p = document.createElement("p");
  var delButton = document.createElement("button");

  divToDo.setAttribute("class", "toDo");
  delButton.classList.add("id", "delToDo");

  delButton.textContent = "Delete";
  p.textContent = textToDo;

  delButton.onclick = function() {
    divToDo.parentNode.removeChild(divToDo);
  }

  divToDo.appendChild(p)
  divToDo.appendChild(delButton);
  list.appendChild(divToDo);
}

.toDo {
  width: 200px;
  height: 80px;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  background-color: yellow;
}

<div class="form">
  <input type="text" id="toDo" placeholder="To do...">
  <button id="addToDo">Add</button>
</div>

<div class="list">

</div>

Ура!

Вместо идентификаторов используйте классы на кнопках удаления. Затем присоедините прослушиватель событий к элементу с идентификатором list, чтобы перехватывать события щелчка, всплывающие из DOM от кнопок. Присоединение одиночных слушателей к родительским элементам для захвата событий нескольких потомков называется «делегированием событий» . Если вы хотите удалить элемент, вы можете просто удалить его из DOM.

// Grab the list container and add a listener to it
const list = document.querySelector('.list');
list.addEventListener('click', handleClick, false);

function handleClick(e) {

  // Destructure the clicked element and grab its
  // classList and parentNode
  const { classList, parentNode } = e.target;

  // If the button is a "delete todo" button
  if (classList.contains('delToDo')) {

    // Remove the todo completely from the DOM
    list.removeChild(parentNode);
  }
}

<div class="list">
  <div class="toDo">
    <p>Do homework</p>
    <button class="delToDo">Delete</button>
  </div>
  <div class="toDo">
    <p>Do smth</p>
    <button class="delToDo">Delete</button>
  </div>
</div>

Попробуйте это

const addButton = document.querySelector("#addToDo");
const list = document.querySelector(".list");

addButton.addEventListener("click", addTask, false);
list.addEventListener("click", delTask, true);

function addTask() {
    const textToDo = document.querySelector("#toDo").value;
    var list = document.querySelector(".list");

    var divToDo = document.createElement("div");
    var p = document.createElement("p");
    var delButton = document.createElement("button");

    divToDo.setAttribute("class", "toDo");
    delButton.setAttribute("id", "delToDo");

    delButton.textContent = "Delete";
    p.textContent = textToDo;


    divToDo.appendChild(p)
    divToDo.appendChild(delButton);

    list.appendChild(divToDo);
}

function delTask(event) {
    const target = event.target;
    
    if (target.nodeName === 'BUTTON') {
        target.parentNode.remove();
    }
}

<div class="form">
    <input type="text" id="toDo" placeholder="To do...">
    <button id="addToDo">Add</button>
</div>

<div class="list">
    <div class="toDo">
        <p>Do homework</p>
        <button id="delToDo">Delete</button>
    </div>
    <div class="toDo">
        <p>Do smth</p>
        <button id="delToDo">Delete</button>
    </div>
</div>

Некоторые наблюдения, потому что вы добавляете новые узлы в DOM, вам нужно использовать стратегию делегирования событий, чтобы сделать новые элементы доступными через события. Вы можете прочитать в этой статье о теме http://javascript.info/event-delegation , если вы предпочитаете видео, курс https://javascript30.com/ 15-го числа. с названием LocalStorage и Event Delegation объясняет предмет очень ясно

Это должно привести вас в правильном направлении. e - это событие, переданное из обработчика, и у него есть свойство target (которое будет вашей кнопкой), все элементы также имеют родителя (который будет div)

function delTask(e) {
  e.target.parent.style.display = 'none';
}

Но как комментарий над вашим идентификатором должен быть уникальным

Ну, вы сделали это очень тяжело для себя, дважды использовав одно и то же значение атрибута id. Правило состоит в том, что каждый элемент, который может иметь атрибут id, должен либо иметь уникальное значение атрибута id, либо вообще не иметь значения.

Если вы хотите повторно использовать значения, вы можете использовать атрибут класса вместо атрибута id.

Основная идея состоит в том, чтобы (1) написать JavaScript, который отслеживает, когда кто-то нажимает на кнопку, а затем (2) найти элемент для удаления и затем (3) удалить его.

Чтобы отслеживать щелчки, вы настраиваете функцию прослушивания и регистрируете ее для каждой кнопки. Прямо сейчас кажется, что вы знаете, как настроить функцию прослушивания и зарегистрировать ее, но вы только добавляете функцию к первой кнопке. Вы должны специально и явно присоединить слушателя к каждому отдельному элементу (или технически к контейнеру, но это педантично). Поскольку вы присоединяете слушателя только к одной кнопке, он будет работать только для этой одной кнопки и не будет работать для других кнопок.

Так что, чтобы это исправить, поищите все кнопки. Примерно так (как только вы измените id на класс):

var buttons = document.querySelectorAll('.delTodo');
for(var button of buttons) {
  button.onclick = deleteTask;
}

Во-вторых, когда кто-то щелкает, вы хотите найти то, на что он нажал. Так уж получилось, что когда функция прослушивателя вызывается в результате щелчка, она получает параметр события, и в этом параметре события вы можете найти то, что было нажато:

function deleteTaskOnClick(event) {
   // Find what was clicked. It is already found for us.
   var theButtonThatWasClicked = event.target;
}

В-третьих, теперь вам нужно удалить элемент. Каждый элемент в объектном модуле документа является объектом с методами. Одним из методов является remove(). Таким образом, вы просто вызываете метод remove элемента, чтобы отсоединить его.

function deleteTaskOnClick(event) {
   var button = event.target;

   // Find the containing element that represents the todo item as a whole
   var todoElement = button.parentElement;

   // Remove the containing element
   todoElement.remove();
}