как перестать повторять функцию в javascript, как только я пытаюсь перестроить массив?

Question

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

Вот код.

    let theList = ["one", "two", "three"]
const todoList = document.querySelector(".todo-list");

window.onload = build;


function build() {
  const tbl = document.createElement("table");
  for (let i = 0; i < theList.length; i++) {
    const row = document.createElement("tr");
    row.ind = i;

    // checkbox
    const checkboxHolder = document.createElement("td");
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.name = "checkbox";
    checkbox.id = "completed";
    checkboxHolder.appendChild(checkbox)
    row.appendChild(checkboxHolder);

    // list Item
    const listItem = document.createElement("td");
    listItem.innerHTML = theList[i];
    row.appendChild(listItem);

    // edit button
    const editBtn = document.createElement("span");
    editBtn.innerText = "Edit";
    editBtn.style.padding = "5px";

    row.appendChild(editBtn);

    // delete button
    const deleteBtn = document.createElement("span");
    deleteBtn.innerText = "Delete";
    deleteBtn.style.padding = "5px";
    deleteBtn.addEventListener("click", function () {
      var itemOut = theList.splice(i, 1);
      build();
    })
    row.appendChild(deleteBtn);





    tbl.appendChild(row);
  }
  todoList.appendChild(tbl)
}

на этой картинке я удалил первый пункт

Answer 1

Этот код работает. Все, что я сделал, это добавил внутренний html в начало функции сборки. Почему это работает?

let theList = ["one", "two", "three"]
const todoList = document.querySelector(".todo-list");

window.onload = build;


function build() {
  todoList.innerHTML = "<h2>Todays List</h2>";
  const tbl = document.createElement("table");
  for (let i = 0; i < theList.length; i++) {
    const row = document.createElement("tr");
    row.ind = i;

    // checkbox
    const checkboxHolder = document.createElement("td");
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.name = "checkbox";
    checkbox.id = "completed";
    checkboxHolder.appendChild(checkbox)
    row.appendChild(checkboxHolder);

    // list Item
    const listItem = document.createElement("td");
    listItem.innerHTML = theList[i];
    row.appendChild(listItem);

    // edit button
    const editBtn = document.createElement("span");
    editBtn.innerText = "Edit";
    editBtn.style.padding = "5px";

    row.appendChild(editBtn);

    // delete button
    const deleteBtn = document.createElement("span");
    deleteBtn.innerText = "Delete";
    deleteBtn.style.padding = "5px";
    deleteBtn.addEventListener("click", function () {
      var itemOut = theList.splice(i, 1);
      build();
    })
    row.appendChild(deleteBtn);





    tbl.appendChild(row);
  }
  todoList.appendChild(tbl)
}