Así que tengo un montón de divs creados dinámicamente y tengo que eliminar los elementos principales de los que hice clic en el botón Eliminar. Aquí está mi código:

 function add() { let newBook = new addBookToLibrary(`"${author.value}"`, `${title.value}`, `${pages.value} pages`); // create a div when clicked submit // and give it class 'card', append to main-container card = document.createElement('div'); main.appendChild(card); card.classList.add('card'); cards = document.querySelectorAll('.card'); // append book info to card container for (let i = 0; i < Object.keys(newBook).length; i++) { div = document.createElement('div'); card.appendChild(div); cardDiv = document.querySelectorAll('.card:last-child div'); cardDiv[i].textContent = Object.values(newBook)[i]; } // create a remove button remove = document.createElement('div'); remove.textContent = 'Remove'; remove.classList.add('remove'); card.appendChild(remove); //event listener remove.addEventListener('click', () => { cards.forEach(card => card.remove()); }) }; submit.addEventListener('click', add);

Esto elimina todas las tarjetas cuando hago clic en el botón Eliminar. Y cuando intento este enfoque:

 remove.addEventListener('click', () => { cards.forEach(card => this.card.remove());

Solo eliminará la última división de la tarjeta. Por favor, ayúdame a arreglar esto.