JS待办列表删除函数无法按ID删除元素问题求助

问题核心 #

点击删除按钮后，所有列表项被删除，同时控制台抛出null错误，根源是代码存在几处关键逻辑与语法问题，下面逐一拆解并修复。

错误原因分析 #

• 重复ID违反HTML规则：每个待办项的内容、日期、按钮共用同一个auto_id，HTML要求ID必须唯一，这会导致DOM选择器无法精准定位目标元素。
• auto_id未重置导致ID混乱：每次添加待办时auto_id持续递增，重新渲染列表时不会重置，ID无意义且同一项多元素共用ID进一步加剧定位错误。
• 删除逻辑冗余冲突：删除时先清空了整个列表容器内容，再尝试删除指定ID元素，此时元素已不存在，自然抛出null错误；且清空容器已完成删除操作，后续remove()完全多余。
• 手动维护store_len多余易出错：数组store本身有length属性，无需单独用store_len跟踪长度，手动维护极易出现与实际数组长度不一致的情况。

修正后的代码 #

HTML部分（修复结构顺序，符合标准）

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid {
      display: grid;
      grid-template-columns: 15% 10% 5%;
    }
  </style>
</head>
<body>
  <p>Todo list</p>
  <input class="input" placeholder="Todo name">
  <input type="date" class="date">
  <button onclick="fetchList();">Add</button>
  <div class="div grid"></div>
  <script src="TODOjs.js"></script>
</body>
</html>

JavaScript部分

let store = [];

function fetchList() {
  // 获取并校验输入值
  const userInput = document.querySelector(".input").value.trim();
  const dateInput = document.querySelector(".date").value;
  if (!userInput || !dateInput) return;

  // 新增待办数据
  store.push({
    TODO: userInput,
    Date: dateInput
  });

  // 清空输入框
  document.querySelector(".input").value = "";
  document.querySelector(".date").value = "";

  // 渲染列表
  renderTodoList();
}

function renderTodoList() {
  const listContainer = document.querySelector(".div");
  listContainer.innerHTML = '';

  store.forEach((item, index) => {
    const html = `
      <div>${item.TODO}</div>
      <div>${item.Date}</div>
      <button onclick="deleteTodo(${index})">Delete</button>
    `;
    listContainer.innerHTML += html;
  });
}

function deleteTodo(index) {
  // 删除对应数据项
  store.splice(index, 1);
  // 重新渲染列表
  renderTodoList();
}

关键修改说明 #

1. 拆分渲染逻辑：将列表渲染单独抽成renderTodoList函数，代码结构更清晰，删除后只需调用该函数重新渲染即可。
2. 用数组索引做删除标识：直接通过数组索引定位待删除项，无需维护额外的auto_id，逻辑简单可靠。
3. 移除冗余变量：删掉store_len和auto_id，利用数组原生的length和forEach索引，避免手动维护变量带来的错误。
4. 简化删除逻辑：删除时只需移除数组对应项，再重新渲染整个列表，规避直接操作DOM导致的元素不存在问题。
5. 添加输入校验：避免空内容或空日期被添加到列表。
6. 修复HTML结构：将head标签移到body外部，符合HTML标准规范。

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