javascript - 一旦更改了从中提取的数组，如何在 Javascript 中重置数据属性的值？

Question

这是我的代码。除了 deleteButton 事件侦听器之外，这一切都按预期工作。它将从页面中删除 book 元素并将其从 myLibrary 数组中删除，但是如果我在删除了之前的元素之一之后尝试删除最后一个元素，那么即使它也不会从 myLibrary 数组中删除已从 DOM 中删除。现在，我目前使用与 myLibrary 数组中对象的索引相对应的 dataset 属性使用名为 data-index 的数据属性，但我想知道是否可以将该属性重置为 myLibrary 的新索引删除另一个元素后的数组。我觉得这会解决我的问题，但我已经尝试了所有我能想到的解决方案，包括重新编写整个代码，但仍然找不到解决方案。已经好几天了，我

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);
    })
}

标签： javascript