如何通过JavaScript实现点击按钮删除Firestore对应表格行数据

你当前的写法不可行，存在3个核心问题：

• 你直接在拼接HTML字符串时执行了deleteDoc方法，该逻辑会在表格渲染阶段就触发删除操作，而非点击按钮时执行
• 此处的this指向的是外层filled_table_start函数的执行上下文，无法拿到当前遍历行对应的学生数据
• deleteDoc需要接收完整的Firestore文档引用，你需要补全集合名称参数，仅传studentID无法生成有效引用

方案1：抽离独立删除函数（易上手） #

首先单独定义删除逻辑：

// 独立删除函数，接收文档ID作为参数
async function deleteStudent(docId) {
  try {
    // 替换下方的「students」为你实际的Firestore集合名称
    await deleteDoc(doc(db, "students", docId));
    // 删除数据库成功后同步移除页面上的表格行
    document.getElementById(`student_${docId}`).remove();
  } catch (err) {
    console.error("删除失败：", err);
  }
}

修正你的表格填充函数：

function filled_table_start(num){
  document.getElementById("tbody1").innerHTML = "";
  let count = 0;
  // 统一拼接所有行后再写入DOM，避免多次重绘提升性能
  let allRows = "";
  members.forEach((member) => {
    if(member.exists()){
      const studentData = member.data();
      // 如果你用studentID作为文档ID就取studentData.studentID，否则取Firestore自动生成的member.id
      const docId = studentData.studentID; 
      let row = `<tr id="student_${docId}" >`;
      row += `<td>${count+1}</td>`;
      row += `<td>${studentData.studentID}</td>`;
      row += `<td>${studentData.name}</td>`;
      row += `<td>${studentData.gender}</td>`;
      row += `<td>${studentData.schoolEmailAdd}</td>`;
      row += `<td>${studentData.handphoneNum}</td>`;
      // 把文档ID作为参数传入删除函数，注意引号转义
      row += `<td><button type="button" onclick="deleteStudent('${docId}')" >删除用户</button></td>`;
      row += '</tr>';
      allRows += row;
      count ++;
    };
  });
  document.getElementById('tbody1').innerHTML = allRows;
}

方案2：事件委托（更推荐） #

避免拼接HTML时拼接函数参数容易出现的引号转义问题，全局只绑定一次事件即可：

1. 表格填充时只给按钮加类名和自定义属性存文档ID：

// 按钮部分的代码替换为：
row += `<td><button type="button" class="delete-btn" data-doc-id="${docId}" >删除用户</button></td>`;

2. 全局绑定点击事件：

document.getElementById("tbody1").addEventListener("click", async (e) => {
  // 仅点击删除按钮时触发逻辑
  if (!e.target.classList.contains("delete-btn")) return;
  const docId = e.target.dataset.docId;
  try {
    await deleteDoc(doc(db, "students", docId));
    // 直接找到当前行移除，无需依赖行ID
    e.target.closest("tr").remove();
  } catch (err) {
    console.error("删除失败：", err);
  }
})

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