从 Firestore 数据库中删除当前文档答案

【问题标题】：Deleting current document from firestore database从 Firestore 数据库中删除当前文档
【发布时间】：2021-08-04 00:58:52
【问题描述】：

我有一个 firestore 数据库和一个网站，您可以在其中查看数据库数据并向其中添加数据。问题是不知道怎么触发当前行文档名删除。

这就是表格的样子（在它的末端我有那个小垃圾桶，当你按下它时，我希望它从数据库中删除这一行）

这是显示数据库数据的 JavaScript 代码：

db.collection("flights").get().then((snapshot) =>{ 
   snapshot.docs.forEach(doc => {
   let data = doc.data()
   

   //*Calculating block time
   var blocktimeHour = data.landing.slice(0,2) - data.takeoff.slice(0, 2);
   var blocktimeMinute = data.landing.slice(3, 5) - data.takeoff.slice(3, 5);
   //*Setting the blocktime format to HH:MM
   if(blocktimeHour < 10){
      blocktimeHour = `0${blocktimeHour}`
   }

   if(blocktimeMinute < 10){
      blocktimeMinute = `0${blocktimeMinute}`
   }

//*Identifying the current document

    //*Displaying the data on the page
   const list = document.querySelector("#gridcontainer");
   const row = document.createElement("tr");

   row.innerHTML +=  `
   <td class="grid-item">${(data.date)}</td>
   <td class="grid-item">${(data.pilot)}</td>
   <td class="grid-item">${(data.copilot)}</td>
   <td class="grid-item">${(data.takeoff)}</td>
   <td class="grid-item">${(data.landing)}</td>
   <td class="grid-item">${blocktimeHour}:${blocktimeMinute}</td>
   <td class="grid-item">${(data.type)}</td>
   <td class="grid-item">${(data.comment)}</td>
   <td class="grid-item"><button onclick="deleteFlight();"><img src="/Images/deleteButton.svg" ><img></button></td>

   `;

   list.appendChild(row);
   

      
   });
})

我想通过那个按钮触发一个函数，并且我想将当前行的文档名称参数传递给它，这样我就可以指定要删除哪个文档。

这是删除函数：

   function deleteFlight(){
   firebase.firestore()
  .collection("flights")
  .doc(thisDoc)
  .delete()
  .then(() => console.log("Document deleted")) // Document deleted
  .catch((error) => console.error("Error deleting document", error));
}

我尝试了很多东西，但我不知道该怎么做

【问题讨论】：

在你的函数deleteFlight里面你是如何定义thisDoc的？在我看来，您需要使用一些查询选择器来定位可能使用来自 onClick 处理程序的事件单击的行，然后使用该数据来计算对 thisDoc 的引用

标签： javascript google-cloud-firestore

【解决方案1】：

在为每个文档生成 HTML 的循环中，除了来自 doc.data() 的相关字段之外，您还需要将 doc.id 添加到 HTML。

db.collection("flights").get().then((snapshot) =>{ 
  snapshot.docs.forEach(doc => {
    let id = doc.id;
    let data = doc.data()
    ...
   <td class="grid-item"><button onclick="deleteFlight('${id}');"><img src="/Images/deleteButton.svg" ><img></button></td>
  })
});

然后您可以使用 deleteFlight 函数中的 ID 找到正确的文档并将其删除：

function deleteFlight(id){
   firebase.firestore()
  .collection("flights")
  .doc(id)
  .delete()
  .then(() => console.log("Document deleted")) // Document deleted
  .catch((error) => console.error("Error deleting document", error));
}

【讨论】：

【解决方案2】：

查看以下文档：
https://firebase.google.com/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection。

您可以调用 .where() 查找与数据库中的数据字段匹配的文档，然后使用 var docRef = db.collection("flights").doc(<result>.id); 通过文档 ID 获取对特定文档的引用。
终于可以拨打docRef.delete()了。

【讨论】：