待办列表项目中点击删除按钮触发fetch DELETE无响应，是什么原因？

问题原因 #

• 事件绑定逻辑错误：deleteItem 函数的作用是给删除按钮绑定点击事件，你需要先主动调用一次deleteItem，点击删除按钮才会触发逻辑，且多次调用deleteItem会出现重复绑定的问题。
• 未向removeItem传递正确的待办ID：点击事件的回调函数默认接收的参数是事件对象，不是你需要的待办_id，导致removeItem中的请求URL拼接错误，无法请求到正确的接口地址。
• DELETE请求完成后未刷新列表：removeItem发送完请求后没有调用renderTodo拉取最新数据重渲染，哪怕请求成功页面也不会更新。
• 删除按钮绑定逻辑不符合业务场景：待办列表每一项对应一个删除按钮，你当前全局绑定单个删除按钮的逻辑无法对应到每个待办的唯一_id。

修复方案 #

1. 首先修改renderTodo渲染待办项的逻辑，给每个待办的删除按钮挂载自定义属性存储对应待办的_id，参考代码如下：

function renderTodo() {
  const list = document.getElementById('todo-list')
  list.innerHTML = ''
  // 此处todos替换为你GET请求拿到的待办数组
  todos.forEach(todo => {
    const li = document.createElement('li')
    li.textContent = todo.待办内容字段 // 替换为你实际的待办内容字段名
    // 每个待办项对应专属删除按钮，把_id存在自定义属性中
    const deleteBtn = document.createElement('button')
    deleteBtn.className = 'todo-delete'
    deleteBtn.dataset.id = todo._id
    deleteBtn.textContent = '删除'
    li.appendChild(deleteBtn)
    list.appendChild(li)
  })
  // 渲染完成后统一绑定删除事件，避免重复绑定
  bindDeleteEvents()
}

2. 改造删除事件绑定和删除请求逻辑：

// 绑定所有删除按钮的点击事件
function bindDeleteEvents() {
  document.querySelectorAll('.todo-delete').forEach(btn => {
    btn.addEventListener('click', async () => {
      // 从按钮自定义属性读取对应待办的_id
      const id = btn.dataset.id
      await removeItem(id)
      // 删除完成后刷新列表
      renderTodo()
    })
  })
}

// 优化removeItem，增加错误处理
async function removeItem(id) {
  try {
    const res = await fetch(`http://localhost:3000/${id}`, {
      method: "DELETE",
      headers: {"Content-Type":"application/json"}
    });
    if (!res.ok) {
      throw new Error('删除请求失败')
    }
  } catch (err) {
    console.error(err)
  }
}

3. 删掉原有无用的deleteItem函数，页面初始化时直接调用一次renderTodo即可。

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