我正在構建一個待辦事項列表，但無法弄清楚如何保留具有直通裝飾的數組值。調用 render 方法時，數組就會從頭開始構建。意味著如果我刪除一個 li，則所有其他已由復選框標記為直通的 li，都會丟失裝飾。我該怎么做才能保持線路暢通？到目前為止，我嘗試在 markTask 方法中將原始值替換為帶有直通線的值，但它不起作用?；旧?，我試圖完成的是通過插入帶有直通式的值，以便能夠檢查該值是否具有直通式樣式，并且在渲染之后能夠將選中的復選框保持為選中狀態。到目前為止我的代碼：class Todo {  constructor() {    this.input = document.getElementById("input");    this.ul = document.getElementById("ul");    this.form = document.getElementById("form");    this.tasks = [];    this.registerEvent();  }  registerEvent() {    this.form.addEventListener("submit", (event) => {      event.preventDefault();      this.createTask(this.input.value);      this.form.reset();    });  }  createTask(task) {    if (task.trim().length === 0) {      return;    }    this.tasks.push(task);    this.render();  }  deleteTask(task) {    const myTask = task.target;    const parent = myTask.parentNode;    const taskToRemove = parent.childNodes[1].textContent;    const index = this.tasks.indexOf(taskToRemove);    this.tasks.splice(index, 1);    this.render();  }  markTask(task) {    const myTask = task.target;    const parent = myTask.parentNode;        if (myTask.checked) {      parent.style.textDecoration = "line-through";    } else {      parent.style.textDecoration = "none";    }  }  render() {    this.ul.innerHTML = "";    this.tasks.forEach((task) => {      const li = document.createElement("li");      const cb = document.createElement("input");      cb.type = "checkbox";      cb.addEventListener("click", (e) => {        this.markTask(e);      });      li.appendChild(cb);      li.append(document.createTextNode(task));      const btn = document.createElement("button");      li.appendChild(btn);      btn.textContent = "Delete";      btn.classList.add("remove");      btn.addEventListener("click", (e) => {        this.deleteTask(e);      });      this.ul.appendChild(li);    });  }}new Todo();<form id="form">  <input id="input" />  <button id="add">Add</button></form><ul id="ul">  </ul>