javascript - 为什么Javascript不按ID删除列表项

Question

//realtime listener for updates to the database. this will take the doc ID from firestore and pass it to the renderList function
db.collection('whispers').where("sender", "==", userID).orderBy('time','asc').onSnapshot(snapshot => {
let changes = snapshot.docChanges();
changes.forEach(change => {  
   if (change.type === "added") {
    renderList(change.doc,whisperList);
  }
if (change.type === "removed") {
  let li = document.getElementById(change.doc.id);
  console.log(li);
  li.remove();
 }
});
});

//renderlist will create a list item in the HTML
function renderList(doc,tabList){
  let li = document.createElement('li');
  let message = document.createElement('span');

  li.setAttribute('id', doc.id);

  let x = doc.data().message;
  li.appendChild(message);
  tabList.insertBefore(li,tabList.childNodes[0]);
}

上述代码应从 Firebase Firestore 数据库中删除基于事件侦听器的列表项。从数据库中删除数据后，事件侦听器会激活上面的代码。它应该选择 HTML 元素的 ID 并将其删除。控制台日志部分正确记录列表数据，因此确实存在具有该 ID 的列表项，但删除此 ID 的以下行不会产生任何操作。如何确保删除该项目？奇怪的是，当我获取记录的 ID 并手动尝试将其从控制台中删除时，它可以工作。

标签： javascripthtmldomgoogle-cloud-firestore