--- title: Firebase Crash Course (Auth & Firestore) #11 - Deleting... description: A step-by-step walkthrough of how to delete documents from a Firestore collection in a React app. Covers wiring up a trash icon button with an onClick handler,... canonical: https://daily.dev/posts/firebase-crash-course-auth-firestore-11---deleting-documents-varzau5g4 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Firebase Crash Course (Auth & Firestore) #11 - Deleting Documents | daily.dev og:description: A step-by-step walkthrough of how to delete documents from a Firestore collection in a React app. Covers wiring up a trash icon button with an onClick handler,... og:url: https://daily.dev/posts/firebase-crash-course-auth-firestore-11---deleting-documents-varzau5g4 og:image: https://api.daily.dev/og/posts/varzAU5G4.png og:image:alt: Firebase Crash Course (Auth & Firestore) #11 - Deleting Documents og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Firebase Crash Course (Auth & Firestore) #11 - Deleting Documents **[Net Ninja](https://daily.dev/sources/netninja)** · 3 min read · 3 upvotes · 0 comments ## Summary A step-by-step walkthrough of how to delete documents from a Firestore collection in a React app. Covers wiring up a trash icon button with an onClick handler, creating an async handleDelete function that uses Firebase's deleteDoc and doc functions, passing the document ID as an argument, and leveraging an existing real-time subscription so the UI updates instantly without a page refresh. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I delete a document from Firestore using the deleteDoc function? Use deleteDoc from the Firebase library, passing in a document reference created with the doc function. The doc function takes three arguments: the database constant, the collection name, and the document ID, unlike the collection function which only takes the database constant and collection name. Wrap the call in an async function with a try/catch block to handle errors. _Building CRUD features with Firestore? daily.dev surfaces practical guides on database operations like this one._ ## Similar posts on daily.dev - [How Firestore Structures Data and How to Perform CRUD Operations With It](https://daily.dev/posts/how-firestore-structures-data-and-how-to-perform-crud-operations-with-it-odioykply) · freeCodeCamp · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#firebase](https://daily.dev/tags/firebase), [#firestore](https://daily.dev/tags/firestore) [View this post on daily.dev](https://daily.dev/posts/firebase-crash-course-auth-firestore-11---deleting-documents-varzau5g4) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Firebase Crash Course (Auth & Firestore) #11 - Deleting Documents","url":"https://daily.dev/posts/firebase-crash-course-auth-firestore-11---deleting-documents-varzau5g4","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-11---deleting-documents-varzau5g4"},"datePublished":"2026-08-05T09:00:50.219Z","dateModified":"2026-09-13T20:56:28.159Z","description":"A step-by-step walkthrough of how to delete documents from a Firestore collection in a React app. Covers wiring up a trash icon button with an onClick handler,...","image":"https://i.ytimg.com/vi/edoy4FvJVkA/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/edoy4FvJVkA/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Net Ninja","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Net Ninja","logo":"https://media.daily.dev/image/upload/s--IXsAE5jo--/f_auto/v1718348103/logos/netninja","url":"https://daily.dev/sources/netninja"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/firebase-crash-course-auth-firestore-11---deleting-documents-varzau5g4","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,typescript,firebase,firestore","timeRequired":"PT3M","video":{"@type":"VideoObject","name":"Firebase Crash Course (Auth & Firestore) #11 - Deleting Documents","description":"A step-by-step walkthrough of how to delete documents from a Firestore collection in a React app. Covers wiring up a trash icon button with an onClick handler,...","thumbnailUrl":"https://i.ytimg.com/vi/edoy4FvJVkA/sddefault.jpg","uploadDate":"2026-08-05T09:00:50.219Z","duration":"PT3M","url":"https://api.daily.dev/r/varzAU5G4","embedUrl":"https://www.youtube.com/embed/edoy4FvJVkA"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Net Ninja","item":"https://daily.dev/sources/netninja"},{"@type":"ListItem","position":3,"name":"Firebase Crash Course (Auth & Firestore) #11 - Deleting Documents"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-11---deleting-documents-varzau5g4#faq","mainEntity":[{"@type":"Question","name":"How do I delete a document from Firestore using the deleteDoc function?","acceptedAnswer":{"@type":"Answer","text":"Use deleteDoc from the Firebase library, passing in a document reference created with the doc function. The doc function takes three arguments: the database constant, the collection name, and the document ID, unlike the collection function which only takes the database constant and collection name. Wrap the call in an async function with a try/catch block to handle errors. Building CRUD features with Firestore? daily.dev surfaces practical guides on database operations like this one."}}]} ```