Creé esta aplicación de biblioteca donde el usuario puede publicar un libro en su cuenta. Cuando el usuario publica un nuevo libro, se supone que debe actualizar los datos, buscar libros, incluidos los más nuevos y mostrarlos, eso funciona. El problema es que cuando recupera y muestra todos los libros nuevamente, duplica los elementos dom en lugar de sobrescribirlos. Aquí está el código:

 //POST THE NEW BOOK addBookForm.addEventListener('submit', (e) => { e.preventDefault() const title = document.querySelector('#bookTitle').value const author = document.querySelector('#bookAuthor').value const pages = document.querySelector('#bookPages').value const description = document.querySelector('#bookDescription').value const image = document.querySelector('#bookImage').files[0] const read = document.querySelector('#bookRead').checked addBookForm.reset() addBookModal.hide() uploadToUserRef(image, title) .then(image =>{ addNewBook(title, author, pages, description, image, read) }) .then(fetchBooks) .then(books => { books.forEach(book => { addCardToHTML(book.data().title, book.data().author, book.data().pages, book.data().description, book.data().image, book.data().read) }) }) }) // DISPLAY BOOKS function fetchBooks() { const docRef = db.collection('users').doc(auth.currentUser.uid).collection('books') return new Promise((resolve, reject) => { docRef.get().then(querySnapshot => { resolve(querySnapshot.docs) }).catch(err => { console.log(err); }) }) } // INJECT THE BOOK CARDS INTO THE HTML function addCardToHTML(title, author, pages, description, image, read) { const card = `<div class="card shadow col-sm-12 col-lg-3 m-3" style="max-width: 15rem; min-height: 350px;"> <div class="card-body"> <div class="mb-2" style="background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(${image}); height: 150px; width: 190px;" ></div> <h5 class="card-title text-danger">${title}</h5> <h6 class="card-subtitle mb-2 text-muted">${author} ${pages}</h6> <p class="card-text">${description}</p> <span class = ${read == true ? "text-success": "text-danger"}>${read == true ? "I've read this book" : "I haven't read this book yet"}</span> </div> </div>` library.innerHTML += card }

Intenté borrar el feed antes de volver a mostrar las tarjetas de libros, pero simplemente borró el feed y no mostró ninguna tarjeta. ¡Gracias!