列表项Toggle时重复生成删除按钮，如何实现可多次切换功能？

当前代码的问题在于：创建Delete按钮的逻辑被写在了列表项（li）的点击事件回调里，每次点击li切换done状态时，都会执行这段创建按钮的代码，导致每次点击都会新增一个Delete按钮。

下面提供两种可行的解决方法：

方法一：创建列表项时直接添加Delete按钮 #

这种方式会在生成列表项的同时就创建好Delete按钮，无论怎么切换done状态，按钮只会存在一个，同时避免点击按钮时误触发done状态切换：

function createListElement() {
  var li = document.createElement("li"); // 创建li节点
  li.appendChild(document.createTextNode(input.value)); // 添加输入的文本内容
  ul.appendChild(li); // 将li添加到列表中
  input.value = ""; // 清空输入框

  // 提前创建Delete按钮并添加到li中
  var delete_btn = document.createElement("button");
  delete_btn.innerHTML = "Delete";
  li.appendChild(delete_btn);

  // 切换done状态的逻辑
  li.addEventListener("click", function (e) {
    // 判断点击的不是Delete按钮时，才执行toggle操作
    if (e.target !== delete_btn) {
      li.classList.toggle("done");
    }
  });

  // 删除列表项的逻辑
  delete_btn.addEventListener("click", function () {
    li.parentNode.removeChild(li);
  });
}

方法二：仅在首次切换时创建Delete按钮 #

如果希望只有当列表项被标记为done时才显示Delete按钮，可以在点击时先检查是否已存在按钮，不存在再创建：

function createListElement() {
  var li = document.createElement("li"); // 创建li节点
  li.appendChild(document.createTextNode(input.value)); // 添加输入的文本内容
  ul.appendChild(li); // 将li添加到列表中
  input.value = ""; // 清空输入框

  // 切换done状态的逻辑
  li.addEventListener("click", function () {
    li.classList.toggle("done");
    
    // 检查当前li中是否已有Delete按钮，没有则创建
    if (!li.querySelector("button")) {
      var delete_btn = document.createElement("button");
      delete_btn.innerHTML = "Delete";
      li.appendChild(delete_btn);
      
      // 删除列表项的逻辑
      delete_btn.addEventListener("click", function () {
        li.parentNode.removeChild(li);
      });
    }
  });
}

内容的提问来源于stack exchange，提问作者Labanino