JavaScript待办清单开发：重置按钮删除生成任务元素问题求解

可行解决方案 #

核心思路：给动态生成的任务单独设置专属容器，所有任务相关的元素都插入到该容器内，重置时仅清空容器内容即可，不会删除页面原有静态元素。

1. 调整HTML结构 #

首先修正原有HTML的结构错误（原有h1、输入框等元素写在了body标签外），同时新增id为task-list的专属任务容器：

<body>
  <h1>To-Do List</h1>
  <input type="text" placeholder="Write a Task" id="task">
  <button id="go" onclick="task()">GO</button>
  <hr>
  <!-- 新增任务专属容器 -->
  <div id="task-list"></div>
  <section>
    <button id="reset">RESET</button>
  </section>
</body>

2. 调整JS逻辑 #

原有代码存在2个问题：

• reset按钮的监听事件写在了task函数的return语句之后，属于不可达代码，永远不会执行
• 任务元素直接插入到body中，无法和其他静态元素区分

修改后的JS代码如下：

// 预获取任务容器节点
const taskList = document.querySelector('#task-list');

function task() {
  const inputVal = document.getElementById("task").value.trim();
  // 新增非空校验，避免插入空任务
  if (!inputVal) return;

  // 创建复选框
  const x = document.createElement("input");
  x.setAttribute("type", "checkbox");

  // 创建换行节点
  const lineBreak = document.createElement("br");

  // 创建任务文本节点
  const todo = document.createElement("p");
  todo.innerText = inputVal;

  // 所有任务元素插入到专属容器，而非body
  taskList.appendChild(x);
  taskList.appendChild(todo);
  taskList.appendChild(lineBreak);

  // 清空输入框，优化体验
  document.getElementById("task").value = '';
}

// 点击GO按钮显示重置按钮
document.querySelector('#go').addEventListener('click', () => {
  document.getElementById("reset").style.visibility = "visible";
});

// 重置按钮点击逻辑：清空任务容器
document.querySelector('#reset').addEventListener('click', () => {
  taskList.innerHTML = '';
  // 重置后隐藏重置按钮，可选
  document.getElementById("reset").style.visibility = "hidden";
});

3. CSS无需修改 #

原有CSS样式可以直接复用。

如果后续需要扩展已完成任务筛选、单条任务删除等功能，还可以给动态生成的复选框、任务p标签统一加上自定义类名，后续选择元素会更方便。

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