待办列表添加首个任务时出现多余删除按钮问题求助

问题描述 #

添加首个任务时，代码会生成一个多余的删除按钮，但添加后续任务时功能正常。通过querySelector从HTML输入框获取任务内容和日期，点击添加按钮触发todo()函数执行操作。

问题根源 #

1. 初始数组的空对象：代码初始化时定义了let tasks = [{task: '', date: ''}];，这个空对象会在首次渲染时生成一个只有删除按钮的空条目，这就是多余按钮的来源。
2. 删除函数的方法错误：deleteToDo里用了tasks.slice(i, 1)，但slice仅返回新数组，不会修改原数组，无法真正删除任务，应该用splice(i, 1)直接修改原数组。
3. 渲染逻辑冗余：循环过程中每次拼接HTML后就更新innerHTML，属于不必要的重复DOM操作，应该循环完成后一次性更新。

修正后的代码 #

JavaScript部分 #

let tasks = []; // 初始化空数组，移除默认的空对象
let displayhtml = '';

function todo() {
  let inputEle = document.querySelector('.js-input');
  let inputEleDate = document.querySelector('.js-date');
  const date = inputEleDate.value;
  const task = inputEle.value;

  // 过滤空任务，避免添加无效条目
  if (!task.trim()) return;

  tasks.push({
    task: task,
    date: date
  });

  // 清空输入框
  inputEle.value = "";
  inputEleDate.value = "";

  displayhtml = '';
  // 循环拼接所有任务的HTML
  for (let i = 0; i < tasks.length; i++) {
    const eletask = tasks[i].task;
    const eledate = tasks[i].date;
    let html = `
      <p>${eletask}   ${eledate} <button onclick="deleteToDo(${i})">Delete</button> </p>
    `;
    displayhtml += html;
  }
  // 一次性更新DOM
  document.querySelector('.js-display').innerHTML = displayhtml;
};

function deleteToDo(i) {
  tasks.splice(i, 1); // 使用splice删除原数组指定索引的元素
  // 删除后重新渲染列表
  todo();
}

HTML部分（优化规范） #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-do List</title>
  <link rel="stylesheet" href="./todo.css"> <!-- 将样式表引用移至head标签内，符合HTML规范 -->
</head>
<body>
  <p>To Do List</p>
  <input class="js-input" placeholder="Add any task to the list">
  <input type="date" class="js-date">
  <button onclick="todo()">Add</button>
  <div class="js-display">
  </div>
  <script src="./todo.js"></script>
</body>
</html>

额外优化建议 #

• 拆分渲染逻辑：把渲染列表的代码单独抽成renderTasks()函数，避免在todo()和deleteToDo()里重复逻辑，示例：

function renderTasks() {
  displayhtml = '';
  for (let i = 0; i < tasks.length; i++) {
    const eletask = tasks[i].task;
    const eledate = tasks[i].date;
    let html = `
      <p>${eletask}   ${eledate} <button onclick="deleteToDo(${i})">Delete</button> </p>
    `;
    displayhtml += html;
  }
  document.querySelector('.js-display').innerHTML = displayhtml;
}

之后在todo()中添加任务后调用renderTasks()，deleteToDo()中删除元素后也调用renderTasks()即可。

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