Javascript Firestore实时删除或修改

我正在使用Firestore进行一个测试项目，只是想看看它有什么功能。一切都正常运行，只是我在运行数据库的实时功能时遇到了一些问题。首先，我初始化数据库并传入凭据

将创建一个新列表，并将其添加到div元素中的文档中。然后我对我想要实时监控的集合调用onSnapshot（）方法。当添加一个元素时，一切都正常，我很难找到如何对“删除”和“修改”路径执行相同的操作

如何实时监视正在删除或修改的项目

// variables based on the newly created firebase db
const db = firebase.firestore();
const colRef = db.collection("werknemers");

// RETRIEVE RECORDS IN REAL TIME 
// I create a list and append it to the element 
var list = document.createElement('ol');
document.getElementById("check").appendChild(list);

// at changes in reference collection onSnapshot() is called 
colRef.onSnapshot(snapshot => {

    // Listen for document metadata changes
    includeMetadataChanges: true;

    // for each change in the document 
    snapshot.docChanges().forEach(function(change) {

      // adding functions 
      if (change.type == "added"){

        let list_item = document.createElement("li");
        list_item.className = "list_item_class";
        list.appendChild(list_item);
        list_item.innerHTML = change.doc.data().departement + " " +   change.doc.data().naam;

      }

      // removed is called, remove something from your list 
      else if (change.type == "removed"){

      }

      // modified is called 
      else if (change.type == "modified"){

      }
    }, function(error){

        console.log("an error has occurred during realtime change process");

  });
});

---

您需要处理三种主要情况：

将文档添加到数据库时，您需要将该文档的元素添加到HTML中

从数据库中删除文档时，您需要从HTML中删除该文档的元素

在数据库中更新文档时，您需要更新HTML中该文档的元素

由于删除和更新需要在HTML中找到文档的元素，因此需要确保在HTML元素中包含文档ID（通常作为其ID）

---

您正在使用的数据库是CloudFireStore，它是一个与实时数据库完全独立的数据库。虽然这两个数据库都是Firebase的一部分，但它们是独立的，每个数据库都有自己的API。请使用正确的产品名称和标签，以增加获得帮助的机会。谢谢你，弗兰克，我的错误。。我感谢你的建议和编辑！

snapshot.docChanges().forEach(function(change) {
  if (change.type == "added"){
    let list_item = document.createElement("li");
    list_item.className = "list_item_class";
    list_item.id = change.doc.id;
    list.appendChild(list_item);
    list_item.innerHTML = change.doc.data().departement + " " +   change.doc.data().naam;
  }
  else if (change.type == "removed"){
    let list_item = document.getElementById(change.doc.id);
    if (list_item) {
      list_item.parentNode.removeChild(listItem);
    }
  }
  else if (change.type == "modified"){
    let list_item = document.getElementById(change.doc.id);
    if (list_item) {
      list_item.innerHTML = change.doc.data().departement + " " +   change.doc.data().naam;
    }
  }
}, function(error){
    console.log("an error has occurred during realtime change process");
});