Delete data from firebase using html on javascript

Question

I have a function to render cards with information from my firebase DB.

The div that i'm using at javascript file:

                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <img class="card-img-top" data-src="${doc.data().foto}">
                        <div class="card-body">
                          <p class="card-text">Local: ${doc.data().local}</p>
                          <p class="card-text">Descricao: ${doc.data().descricao}</p>
                          <p class="card-text">Situacao: ${doc.data().situacao}</p>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                              <button type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#myModal">Edit</button>
                              <button type="button" class="btn btn-sm btn-outline-secondary type="submit" onclick="deleteCard(${doc.id})">Apagar</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

As you can see I need to create a button to delete this information.

I'm trying to pass to the function

function deleteCard(id) {


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

}

The console tho is sending the me the error:

Uncaught ReferenceError: IcKDt_____pUQcy is not defined
    at HTMLButtonElement.onclick (myindexLogged.html:1)

What i'm doing wrong ??

question from:https://stackoverflow.com/questions/66055005/delete-data-from-firebase-using-html-on-javascript

Answer 1

Perhaps replace deleteCard(${doc.id}) with deleteCard(${doc.data().id})