为表格删除按钮添功能：无法获取list_body关联ID以删除行

你的代码存在几个核心问题：动态渲染的复选框无法正确关联任务ID、删除函数逻辑不符合REST规范且变量作用域错误，以下是完整修复步骤：

第一步：修复列表渲染逻辑，绑定任务ID到DOM元素 #

修改displayList函数，给表格行和复选框添加data-task-id属性，让DOM元素和任务ID直接关联：

// 获取用户列表并渲染到表格
const displayList = () =>
  fetch(`/api/lists`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
  .then(response => response.json())
  .then(data => {
    const tableBody = document.querySelector('#task-table tbody');
    tableBody.innerHTML = "";

    data.tasks.forEach(task => {
      if (task.list_body) {
        const checkboxId = `check-box${task.id}`;
        const row = document.createElement("tr");
        // 给表格行绑定任务ID
        row.setAttribute('data-task-id', task.id);
        row.innerHTML = `
          <th scope="row">
            <input class="todo__checkbox" type="checkbox" id="${checkboxId}" data-task-id="${task.id}">
          </th>
          <td class="text-break">${task.list_body}</td>
        `;

        tableBody.appendChild(row);
      }
    })
  })

第二步：重构删除功能，用正确请求方式处理删除 #

删除函数不需要重复拉取列表，直接获取选中复选框的任务ID，发送DELETE请求后刷新列表：

// 给删除按钮绑定点击事件
document.querySelector('#btn-complete').addEventListener('click', handleDelete);

function handleDelete() {
  // 获取所有选中的复选框
  const checkedBoxes = document.querySelectorAll('.todo__checkbox:checked');
  
  // 遍历选中项执行删除
  checkedBoxes.forEach(box => {
    const taskId = box.getAttribute('data-task-id');
    deleteList(taskId);
  });
}

// 单个任务删除函数
const deleteList = (taskId) =>
  fetch(`/api/lists/${taskId}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
    },
  })
  .then(response => {
    if (response.ok) {
      // 删除成功后重新渲染列表
      displayList();
    } else {
      console.error('删除任务失败');
    }
  })
  .catch(err => console.error('请求错误:', err));

关键修复说明 #

• ID关联：通过data-task-id属性让DOM元素和后端任务ID直接绑定，解决无法获取对应ID的问题
• 请求规范：使用DELETE请求而非GET请求删除资源，符合REST API设计规范
• 动态元素处理：通过querySelectorAll获取所有选中的复选框，避免动态渲染元素无法被单个querySelector捕获的问题
• 界面同步：删除成功后重新调用displayList()，确保页面数据和后端一致

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