Delete Documents In Cloud Firestore For Web, Update The UI

I have been working on some little side project dubbed Lolfacts, while learning much more of Firebase for Web and need to CRUD(Create, Read, Update and Delete) has been evident in the tiny project. Really exciting.

If this is the first time exploring Firebase Cloud Firestore for Web, be sure to have a look at this codelab code snippets and/or take it just to understand how to render each document data into the Front-end using Vanilla ES6.

1. Within the delete element

 // 1. grab the delete element say "del" and listen to a click event
  del.addEventListener("click", event => {
  // 2. prompt to confirm delete
    let result = confirm("Want to delete? This action can not be undone.");
    if (result) {
      // 3. logic to delete the element named say, "lolfact"
      event.stopPropagation();
      let id = lolfact.getAttribute("data-id");
      console.log(id);
      // 4. get the collection to delete from
      db.collection("lolfacts")
        .doc(id)
        .delete();
      // 5. delete it from the parent element to refresh the ui
      app.removeChild(lolfact);
    }
});

Orginally Posted on maye.pwafire.org