如何实现表格行删除功能并同步至服务器API？

要搞定删除功能，核心就是绑定按钮事件→调用API删除→更新DOM这三步，给你捋清楚具体实现：

核心思路 #

• 给每个删除按钮关联对应文章的ID（用data-id属性最方便）
• 用事件委托监听删除按钮点击（动态生成的元素直接绑事件容易失效，事件委托更靠谱）
• 发送DELETE请求到服务器，成功后移除对应的表格行

修改后的代码实现 #

完整JavaScript代码

const blog_list = document.getElementById('blog_list')
let limit = 15

// 获取博客列表
async function getBlogs() {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}`)
  const responseToJSObject = await response.json()
  return responseToJSObject
}

// 发送删除请求到服务器
async function deleteBlog(postId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    // jsonplaceholder的DELETE请求返回200即为模拟成功
    if (response.ok) {
      return true
    }
    throw new Error('删除请求失败')
  } catch (err) {
    console.error(err)
    alert('删除失败，请稍后重试')
    return false
  }
}

// 渲染博客列表
async function showBlogs() {
  const blogs = await getBlogs()
  blogs.forEach(function(blog) {
    // 给删除按钮加上data-id属性，存储对应文章ID
    blog_list.innerHTML += `
            <tr>
                <td>${blog.id}</td>
                <td>${blog.title}</td>
                <td>
                    <button class="delete" data-id="${blog.id}"><i class="fa-solid fa-trash"></i></button>
                </td>
            </tr>
        `
  })
}

// 事件委托：监听tbody内的删除按钮点击
blog_list.addEventListener('click', async (e) => {
  if (e.target.closest('.delete')) {
    const deleteBtn = e.target.closest('.delete')
    const postId = deleteBtn.dataset.id
    const row = deleteBtn.closest('tr')

    // 先调用删除API，成功后再移除DOM元素
    const isDeleted = await deleteBlog(postId)
    if (isDeleted) {
      row.remove()
    }
  }
})

showBlogs()

关键细节说明 #

1. 事件委托的优势：直接给动态生成的按钮绑定事件，刷新列表后会失效；监听父元素blog_list的点击事件，通过closest('.delete')判断点击目标，稳定性更强。
2. 关联文章ID：通过data-id="${blog.id}"把文章ID存到按钮上，点击时直接取值就能定位要删除的目标。
3. API请求规范：DELETE请求必须指定method: 'DELETE'，同时加上错误捕获逻辑，请求失败时给用户明确提示，避免静默出错。
4. DOM更新时机：必须等服务器请求成功后再移除表格行，避免前端显示删除但服务器未同步的不一致情况。

注意 #

当前使用的jsonplaceholder是模拟API，不会真正删除服务器数据，但整个流程和真实项目完全一致，替换成你的真实API地址即可直接复用。

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