0
//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]);
}

The above code should remove a list item based on an event listener from a Firebase Firestore database. Upon removal of data from the database, an event listener activates the code above. It should pick the ID of the HTML element and removes it. The console log part logs the list data correctly so there does exist a list item with that ID, but the following line to remove this doesn't produce any action. How can I ensure the item is removed? Strangely, when I take the logged ID and manually try to remove it from the console, it works.

Itay
  • 16,601
  • 2
  • 51
  • 72
user3385829
  • 117
  • 1
  • 9
  • 2
    You should probably consider added the minimum code required to reproduce your issue. Without it, you'll only get speculation from those willing to 'take a stab in the dark'. (I'm not amongst that group of guessers) – enhzflep Jul 29 '20 at 00:55
  • 1
    But the li is a DOM element, why would that affect firebase? – zero298 Jul 29 '20 at 00:56
  • 1
    @enhzflep just added more for your reference. Thanks – user3385829 Jul 29 '20 at 01:08
  • @zero298 that was for reference so that I can give a bit of background on where I get the trigger to remove the list item. – user3385829 Jul 29 '20 at 01:09
  • I think [this](https://stackoverflow.com/questions/3387427/remove-element-by-id/27710003) may be a good read for your issue, but basically, you have to specify the parent when using the remove method. – rsalinas Jul 29 '20 at 09:45

0 Answers0