待办列表删除确认弹窗取消功能失效问题求助

我正在开发一个To-do list（待办事项列表），当点击红色垃圾桶删除按钮时，会弹出确认删除的对话框。按需求点击“cancel”按钮应关闭该弹窗并保留对应任务，但目前弹窗无法关闭，我尝试多种方法均无效，请求协助实现点击“cancel”关闭弹窗的功能。

相关代码 #

JavaScript代码

document.addEventListener('DOMContentLoaded', () => {
  const textareaEle = document.getElementById('j');

  textareaEle.addEventListener('input', () => {
    textareaEle.style.height = 'auto';
    textareaEle.style.height = `${textareaEle.scrollHeight}px`;
  });
});

function myFunction() {
  const body = document.getElementById("body");
  const whole = document.getElementById("whole");
  const dif = document.getElementById("dif");
  const div = document.getElementById("copy");
  const sauce = document.getElementById("sauce");
  const textareaEle = document.getElementById('j');
  let checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox", "class", "checkbox");
  let paragraph = document.createElement("p");
  paragraph.setAttribute("class", "checkbox");
  let konq = document.createTextNode(textareaEle.value);
  let line = document.createElement("br");
  const hr = document.createElement("hr");
  hr.setAttribute("id", "hr")
  let sauceItem = document.createElement("div");
  let del = document.createElement("input");
  del.setAttribute("class", "del", )
  del.src = "trash2.png";
  del.type = "image";
  sauceItem.classList.add("sauce-item");
  let sauceI = document.createElement("div");
  sauceI.classList.add("sauce-i");
  paragraph.appendChild(konq);
  sauceI.appendChild(hr);
  sauceItem.appendChild(checkbox);
  sauceItem.appendChild(paragraph);
  sauceItem.appendChild(del);
  sauceItem.appendChild(line);
  sauce.appendChild(sauceItem);
  sauce.appendChild(sauceI);
  del.onclick = function() {
    let popup = document.createElement("div");
    popup.setAttribute("id", "overlay")
    let textche = document.createElement("p");
    textche.textContent = "Are you sure you want to delete it? Once removed, it can't be restored."
    let r = document.createElement("button");
    r.textContent = "remove"
    r.setAttribute("id", "r")
    c = document.createElement("button");
    c.textContent = "cancel"
    c.setAttribute("id", "c")
    hhr = document.createElement("hr");
    hhr.setAttribute("id", "hrr")
    popup.appendChild(textche);
    popup.appendChild(hhr);
    popup.appendChild(r);
    popup.appendChild(c);
    sauce.appendChild(popup);
    c.onclick = function() {
      //cancel pop up
    }
  }
};

HTML代码

<body id="body">
  <script src="index.js"></script>
  <div id="dif">
    <p1 id="f">To-do list</p1>
    <hr>
    <div id="copy">
      <textarea type="text" id="j" placeholder="Enter here" rows="1"></textarea>
      <button id="e" onclick="myFunction()">Add</button>
      <hr>
      <div id="sauce">
      </div>
    </div>
  </div>
</body>

解决方案 #

核心修复：实现弹窗关闭逻辑 #

你只需要在cancel按钮的点击事件中，调用popup.remove()即可移除弹窗。同时还要修正几个代码规范问题，避免潜在bug：

1. 给未声明的变量添加const/let：创建cancel按钮、弹窗、hr元素时，要通过const声明变量，避免全局变量污染。
2. 修正setAttribute的错误用法：setAttribute一次只能设置一个属性，不能批量传参，改用直接设置属性或classList.add更可靠。
3. 补充remove按钮的任务删除逻辑（可选但实用）：点击remove按钮时，同时删除对应任务项和弹窗。

修改后的关键代码片段 #

del.onclick = function() {
  const popup = document.createElement("div");
  popup.setAttribute("id", "overlay")
  const textche = document.createElement("p");
  textche.textContent = "Are you sure you want to delete it? Once removed, it can't be restored."
  const r = document.createElement("button");
  r.textContent = "remove"
  r.setAttribute("id", "r")
  const c = document.createElement("button");
  c.textContent = "cancel"
  c.setAttribute("id", "c")
  const hhr = document.createElement("hr");
  hhr.setAttribute("id", "hrr")
  
  popup.appendChild(textche);
  popup.appendChild(hhr);
  popup.appendChild(r);
  popup.appendChild(c);
  sauce.appendChild(popup);
  
  // Cancel按钮：关闭弹窗
  c.onclick = function() {
    popup.remove();
  }
  
  // Remove按钮：删除任务+关闭弹窗
  r.onclick = function() {
    sauceItem.remove();
    popup.remove();
  }
}

修正checkbox的创建代码 #

const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.classList.add("checkbox");

修改后，点击cancel按钮就能正常关闭弹窗，代码也更规范稳定。

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