The site implements adding and deleting banks created by the user. When added, the bank is added to the Firebase database. When a user adds a bank, it is immediately displayed on the screen. How to make it disappear from the screen when deleting a bank? Now I have implemented deletion from Firebase, but I don’t know how to remove it from the array so that it disappears on the screen.
// Function that controls the display of banks on the screen
function getBanks() {
db.collection("banks").onSnapshot((snapshot) => {
let banks = [];
snapshot.docChanges().forEach((change) => {
const bank = {
id: change.doc.id,
...change.doc.data(),
};
if (change.type === "added") {
banks.push(bank);
generateBanks([bank]);
} else if (change.type === "removed") {
//how to remove a bank from an array of banks and redraw the screen
}
});
});
}
//bank deletion
bank_delete_el.addEventListener("click", () => {
db.collection("banks").doc(bank.id).delete();
});