He creado bancos que se muestran desde la base de datos en forma de tarjetas. ¿Cómo puedo tomar la identificación del documento en el que hago clic y eliminar esta tarjeta de la base de datos?
function getBanks() { db.collection("banks").onSnapshot((snapshot) => { let banks = []; snapshot.docChanges().forEach((change) => { const bank = change.doc.data(); if (change.type === "added") { banks.push(bank); generateBanks([bank]); } else if (change.type === "removed") { console.log("Removed bank: ", bank ); } }); }); } function generateBanks(banks) { banks.forEach((bank) => { ... const bank_delete_el = document.createElement("button"); bank_delete_el.classList.add("delete"); bank_delete_el.innerText = "Delete"; }); }); }Aquí hay un ejemplo simple que usa el detector de eventos de clic y la delete de firebase:
function generateBanks(banks) { banks.forEach((bank) => { ... const bank_delete_el = document.createElement("button"); bank_delete_el.classList.add("delete"); bank_delete_el.innerText = "Delete"; bank_delete_el.addEventListener("click", (_event) => { console.log("Deleting bank...", bank); db.collection("banks").doc(bank.id).delete() .then(() => { console.log("Bank successfully deleted!"); }) .catch((error) => { console.error("Error removing Bank: ", error); }); }); }); } Aquí están los documentos para addEventListener y firebase delete .
También parece que a su cuerpo
docChangesle falta el campo deidpara nuevos bancos, que es necesario para la eliminación.
const bank = change.doc.data(); // Should be const bank = { id: change.doc.id, ...change.doc.data(), };Puede intentar agregar la id del documento como un data-attribute , por ejemplo:
function generateBanks(banks) { banks.forEach((bank) => { ... const bank_delete_el = document.createElement("button"); benk_delete_el.setAttribute("bank-id", bank.id); // add the id as data attribute bank_delete_el.classList.add("delete"); bank_delete_el.innerText = "Delete"; }); }); }Esto creará el botón como
<button class="delete" data-bank-id="some-id-123"> Delete </button>Luego, cuando hace clic en el botón Eliminar, puede obtener la identificación y eliminarla de Firestore.
// on click -> get button element, then const bankId = myButton.getAttribute("bank-id"); db.collection("banks").doc(bankId).delete().then(() => { // ... });