Firebase Firestore Tutorial #5 - Deleting Data

Key Takeaways

alright then gang so now we know how to get documents from the fire store and how to add new documents to the fire store via this form now the next thing I want to introduce you to is how to delete documents from the fire store now from a UI perspective this is how I'd like it to work I want to display a little cross in each Li tag over here and when we click on that cross it makes a delete request to the fire store to delete this document from the fire store now remember these Li tags they're being output in this render cafe function right here so for each different document that we receive we're creating an li tag and then to span tags inside the Li tag and we're rendering that to the Dom for each one right here so also for each Li tag I'd like to create another element which is going to have a little X inside it for the cross so let's now create that element I'll say let cross equal to document dot create element and then inside this is going to be a div now it can be a span if you want I've just done it as a div so I can style it differently in the CSS without messing around with and child selectors and things like that so anyway we've created that element now now we need to set the text content of it so I'll say cross doc text content and that's going to be equal to just an X all right finally we need to append this div right here to the li so I'll say Li dot append child and we want to append the cross all right so now if we save that we should see a cross element for every allied tag there it is ok cool now if we click on this at the minute nothing is gonna happen so what we need to do is hook up that functionality for each one of these crosses now where are we going to hook up that functionality well a good idea is to hook it up inside this render Cafe function right here because what we can do is access that individual cross each time around for each document and we can set an event listener to each individual cross so let's do a little comment first of all and this is gonna say deleting data then underneath that we will say cross which is the element we just created and rendered to the dom dot add events listener the event is going to be a click event that we want to listen to and will fire this callback function taking the event object when a user clicks it now the first thing I'm going to do is say stop propagation that just stops the event bubbling up okay next I'd like to say let ID equal to e target dots parent elements like so dots get attribute and I'll explain this in a second and then the attribute we want is the data - ID now what am i doing here well I'm getting an ID variable and I'm setting that equal to the event target which is the cross the element that we click on then I'm getting the parent element of that cross which is the Li then I'm getting an attribute from that Li which is the data ID attribute remember we set that date ID attribute right here so what I'm actually getting is the document ID that is the unique ID for the document inside here this thing so when I click on a cross for example this top one what I'm doing is getting this ID right here so that once I have that ID what I can do is use it to query the firestore and say hey find a document with this ID and then delete it so that's what we want to do now we have the ID now we just need to query the firestore and delete that document so DB dot collection because we want to go into the caffee's collection again then what we want to do is find an individual document now how do we do that because previously we've just been retrieving or using the full collection now this time we want to find one document inside that collection now to do that we say dot doc this is how we find a single document and we pass the ID of that document inside here so we can pass through the ID like so cool so now we have a reference to the document with that ID so whichever document the cross corresponds to so now we have that reference we can just use a method called delete and that will go ahead and that document alright so let's try this out in the browser I'm just gonna try and delete Shawn's magical coffee Emporium I'll press the cross obviously nothing happens on the front end because we're not hooking up to real-time updates in the database yet but if we go to the database we can see one less record now here there's three over here and we can't find Shawn's magic coffee Emporium anywhere now if we refresh over here it's gone cool so again what we're doing is we're creating now across for every single Li tag that we render every single document that we retrieve so they're all getting their own cross and we're appending that cross to that Li now we're setting up an event list it's a each individual cross and that event listener is listening for a click event we're stopping the propagation of that event so it doesn't bubble up and then we're using this ID right here to get that ID from the Li tag and then we're using the ID to grab this document and then delete it does that make sense good alright then so now we know how to retrieve data save data and delete data in the next video I want to show you how to perform slightly more complex queries