CODEWITHSUNDEEP
javascriptfirebasegoogle-cloud-firestore
Bhautik Chudasama
Bhautik Chudasama

Reputation: 712

Does not delete document from firebase when click on button (onclick method)

Does not delete stored document in cloud-firestore.

When i run my program 5 buttons are show (because my firestore documents are 5) and when i click button then show error test.html:1 Uncaught ReferenceError: ds5678fhiksnie is not defined at HTMLButtonElement.onclick (test.html:1) I want to when button is clicked then id according document is deleted.

<html>
<body>
    <!-- parent named class inner buttons according document stored in cloud-firestore-->
    <div class="parent"></div>
    <-- api -->
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>

    <script
        src="https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js"></script>


    <script>
// web setup this is sample
        firebase.initializeApp({
         apiKey: '### FIREBASE API KEY ###',
         authDomain: '### FIREBASE AUTH DOMAIN ###',
         projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});
firebase.initializeApp(config);
</script>
    <script>
        var db = firebase.firestore();
        // inserting one record automatic id
        db.collection("users").add({
            first: "Ada",
            last: "Lovelace",
            born: 2000
        })
        .then(function(docRef) {
            console.log("Document written with ID: ", docRef.id);
        })
        .catch(function(error) {
            console.error("Error adding document: ", error);
        });

        // get element
        var p =document.querySelector(".parent");
       // display the document
        db.collection("users").get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                var d=String(doc.id);
                console.log(d);
                // if stored documents are 5 then 5 buttons will display 
                p.innerHTML+="<button onclick=delet("+String(d)+")>Hello</button>";
            });
        });

         // delete function(id passing)
        function delet(v) {
        console.log(v);
        db.collection("users").doc(v).delete().then(function() {
            console.log("Document successfully deleted!");
        }).catch(function(error) {
            console.error("Error removing document: ", error);
        });
        }

        </script>
</body>
</html>

Upvotes: 1

Views: 1083

Answers (2)

Bhautik Chudasama
Bhautik Chudasama

Reputation: 712

Using JavaScript literals 

 <html>
    <head>

    </head>
    <body>
       <div class="parent">

    </div>
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: ####,
        authDomain: ####,
        databaseURL: ####,
        projectId: ###,
        storageBucket: ###,
        messagingSenderId: ###
      };
      firebase.initializeApp(config);


    </script>
    <script>
    var db = firebase.firestore();

    db.collection("users").add({
        first: "Ada",
        last: "Lovelace",
        born: 2000
    })
    .then(function(docRef) {
        console.log("Document written with ID: ", docRef.id);
    })
    .catch(function(error) {
        console.error("Error adding document: ", error);
    });


    var p = document.querySelector(".parent");
    db.collection("users").get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            var d=String(doc.id);
            console.log(d);

            p.innerHTML+=`<button onclick="deleti('${d}')">Ok</button>`;
        });
    });
    function deleti(v) {
    v=v.toString();

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

    }

    </script>
    </body>
    </html>

Upvotes: 1

Telwa Gangnam
Telwa Gangnam

Reputation: 31

try collection.child(v).remove() then handler your callbacks.

Upvotes: 0

Related Questions