Aquí está mi código. Todo funciona según lo previsto excepto por el detector de eventos deleteButton. Eliminará el elemento del libro de la página y lo eliminará de la matriz myLibrary, pero si trato de eliminar el último elemento después de haber eliminado uno de los elementos anteriores, no se eliminará de la matriz myLibrary aunque fue eliminado del DOM. Ahora, actualmente tengo el atributo de datos llamado índice de datos usando la propiedad del conjunto de datos correspondiente al índice del objeto en la matriz myLibrary, pero quiero saber si es posible que restablezca ese atributo al nuevo índice de myLibrary. matriz después de eliminar otro elemento. Siento que eso solucionará mi problema, pero probé todas las soluciones que se me ocurrieron, incluida la reescritura de todo el código, y todavía no puedo encontrar una solución. Han pasado días y estoy empezando a perder la cabeza.
const bookShelf = document.querySelector('.books-tab'); const addBookButton = document.getElementById('bookButton'); const buttonTab = document.querySelector('.button-tab'); const formElement = document.getElementById('formElement'); let myLibrary = []; let libraryQueue = []; function Book(title, author, pageCount, readYet){ this.title = title, this.author = author, this.pageCount = pageCount, this.readYet = readYet, this.info = function(){ console.log(title, author, pageCount, readYet); } } addBookButton.addEventListener('click', function() { let book = new Book(); book.title = document.getElementById("title").value; book.author = document.getElementById("author").value; book.pageCount = document.getElementById("pages").value; myLibrary.push(book); libraryQueue.push(book); displayBooks(); formElement.reset(); libraryQueue.length = 0; }) function displayBooks(){ let addBook; let addAuthor; let deleteButton; for(let i = 0; i < libraryQueue.length; i++){ addBook = document.createElement('div'); addAuthor = document.createElement('p'); deleteButton = document.createElement('button'); addBook.textContent = `"${libraryQueue[i]['title']}"`; addAuthor.textContent = `-${libraryQueue[i]['author']}`; deleteButton.textContent = `Delete`; bookShelf.appendChild(addBook); addBook.appendChild(addAuthor); addBook.appendChild(deleteButton); } for(let i = 0; i < myLibrary.length; i++){ addBook.dataset.index = i; } deleteButton.addEventListener('click', function(){ myLibrary.splice(addBook.dataset.index, 1); addBook.remove(); delete addBook.dataset.index; console.log(myLibrary); }) }