本文详解如何在使用 Fetch API 动态生成的 HTML 表格中，为每一行绑定独立的删除功能，确保点击某行的删除按钮时能精准获取对应任务的 id 并发起 DELETE 请求。

本文详解如何在使用 fetch api 动态生成的 html 表格中，为每一行绑定独立的删除功能，确保点击某行的删除按钮时能精准获取对应任务的 `id` 并发起 delete 请求。

在构建基于前端 JavaScript 与 RESTful 后端交互的任务管理界面时，一个常见痛点是：表格行由 JS 动态创建，但删除操作无法准确识别目标记录的唯一标识（如 task.id）。原始代码中尝试通过全局查询 .todo__checkbox 或硬编码 #btn-complete 按钮来触发删除，导致逻辑错位——按钮无法关联到具体某一行的数据。

根本问题在于事件绑定方式与数据上下文脱节：静态选择器（如 document.querySelector('.todo__checkbox')）只能捕获首个匹配元素，而未将 task.id 作为可访问的运行时参数注入到事件处理流程中。

✅ 正确实践：委托事件 + 数据属性绑定

我们采用 事件委托（Event Delegation） 结合 *`data-` 自定义属性** 的方案，既避免为每一行重复绑定监听器，又能安全、清晰地传递 ID：

1. 在生成表格行时，将 task.id 存入删除按钮的 data-id 属性；
2. 为 统一绑定点击监听器，利用 event.target 判断是否点击了 .btn-delete；
3. 从 dataset.id 提取 ID，并调用 deleteList(id) 发起精准删除请求。

以下是优化后的完整实现（含结构化 HTML 与模块化 JS）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>任务列表管理</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
  <h2>我的任务清单</h2>
  <table id="task-table" class="table table-hover table-bordered">
    <thead class="table-light">
      <tr>
        <th scope="col">完成</th>
        <th scope="col">任务内容</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 动态插入行 -->
    </tbody>
  </table>

  <script>
    // ✅ 封装：创建单行 DOM 元素（含 checkbox 和 delete 按钮）
    const createTableRow = (task) => {
      const row = document.createElement('tr');
      const checkboxId = `check-box-${task.id}`;
      row.innerHTML = `
        <td><input class="todo__checkbox form-check-input" type="checkbox" id="${checkboxId}"></td>
        <td class="text-break">${task.list_body}</td>
        <td><button class="btn btn-sm btn-danger btn-delete" data-id="${task.id}">?️ 删除</button></td>
      `;
      return row;
    };

    // ✅ 加载并渲染任务列表
    const displayList = () => {
      fetch('/api/lists', {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
      })
        .then(res => {
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          return res.json();
        })
        .then(data => {
          const tbody = document.querySelector('#task-table tbody');
          tbody.innerHTML = ''; // 清空旧内容

          (data.tasks || []).forEach(task => {
            if (task.list_body && task.id !== undefined) {
              tbody.appendChild(createTableRow(task));
            }
          });
        })
        .catch(err => console.error('加载任务失败:', err));
    };

    // ✅ 执行删除（发送 DELETE 请求）
    const deleteList = (id) => {
      if (!id) return;
      fetch(`/api/lists/${id}`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' }
      })
        .then(res => {
          if (!res.ok) throw new Error(`删除失败: ${res.status}`);
          console.log(`✅ 已成功删除 ID=${id} 的任务`);
        })
        .catch(err => console.error('❌ 删除请求异常:', err))
        .finally(() => displayList()); // 刷新视图（可选：也可局部移除 DOM 行提升体验）
    };

    // ✅ 全局事件委托：监听 tbody 内所有 .btn-delete 点击
    document.addEventListener('DOMContentLoaded', () => {
      const tbody = document.querySelector('#task-table tbody');
      tbody.addEventListener('click', (e) => {
        if (e.target.classList.contains('btn-delete')) {
          const id = e.target.dataset.id;
          if (id) deleteList(id);
        }
      });

      // 首次加载数据
      displayList();
    });
  </script>
</body>
</html>

⚠️ 关键注意事项

• 不要滥用 querySelector 获取动态元素：如 document.querySelector('.todo__checkbox') 在多行场景下仅返回第一个匹配项，应改用事件目标（e.target）或遍历 querySelectorAll()。
• 后端路由需支持路径参数：DELETE /api/lists/{id} 是标准 REST 实践，确保服务端正确解析并校验 id。
• 增强健壮性建议：
  • 添加确认弹窗（if (!confirm('确定删除？')) return;）；
  • 删除前禁用按钮防止重复提交；
  • 使用 fetch().finally() 或 AbortController 处理加载状态；
  • 对 task.id 做存在性校验，避免 undefined 导致错误 URL（如 /api/lists/undefined）。

通过以上设计，你不仅解决了 ID 传递难题，更构建出可扩展、易维护的前端交互模式——每个 UI 元素与其背后的数据 ID 形成显式、可靠、无歧义的映射关系。