How to delete a document completely with data inside it in firestore

Question

I'm using reactjs I want to delete a specific document which is shown in the red box. the document might contain some data. I want to delete the document completely with data inside it. I used the following code to delete the document

    db.collection(currentUser.uid).doc(documentName).delete().then(function() {
    console.log("Document successfully deleted!");
}).catch(function(error) {
    console.error("Error removing document: ", error);
});

This is giving me inconsistent results. If I click on the delete button, It will not delete the document. When I refresh the page and click on the button again then it will delete it from firebase. When I click on delete button without refresh, it gives red and green colour animation to document name and also to its data like it is deleting it and again updating it as you can see in the image.

It would be great if anyone could give me a solution

Answer 1

Firebase SDK was doing its job but there was some problem with my implementation.