如何为图书馆应用数组中新增的显示对象添加删除按钮

要实现既能删除初始渲染行、又能删除新增行的功能，需要解决两个核心问题：关联表格行与数组中的书籍对象，以及同步更新DOM和数据数组。以下是具体修改方案：

关键修改点 #

• 给每个Book实例添加唯一ID，方便后续在数组中定位删除
• 移除按钮重复的id属性（同一页面不能有重复ID）
• 修改删除按钮的点击事件，传递对应书籍的ID参数
• 实现删除函数，同时删除数组中的对应元素和页面上的表格行

修改后的完整代码 #

JavaScript 部分 #

function Book(name, author, ReadOrNot) {
    this.id = Date.now() + Math.random(); // 生成唯一ID
    this.name = name;
    this.author = author;
    this.ReadOrNot = ReadOrNot;
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read");
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read");
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read");

let myLibrary = [];

function addBookToLibrary(...arr) {
    myLibrary.push(...arr);
}

addBookToLibrary(book1);
addBookToLibrary(book2);
addBookToLibrary(book3);

function addBookToTable() {
    const tbody = document.querySelector('tbody');
    // 先清空tbody避免重复渲染（新增书籍时需要调用此函数）
    tbody.innerHTML = '';
    myLibrary.forEach(book => {
        const tr = document.createElement('tr');
        tr.dataset.bookId = book.id; // 给行绑定书籍ID
        let content = `<td>${book.name}</td><td>${book.author}</td>`;
        content += `<td><button class="btn rdbtn">${book.ReadOrNot}</button></td>`;
        content += `<td><button class="btn delbtn" onclick="toggleDelete(${book.id})">Delete</button></td>`;
        tr.innerHTML = content;
        tbody.appendChild(tr);
    });
}

// 删除函数
function toggleDelete(bookId) {
    // 1. 从数组中删除对应书籍
    myLibrary = myLibrary.filter(book => book.id !== bookId);
    // 2. 删除页面上对应的表格行
    const targetRow = document.querySelector(`tr[data-book-id="${bookId}"]`);
    if (targetRow) {
        targetRow.remove();
    }
}

// 初始渲染表格
addBookToTable();

// 示例：新增书籍的函数（如果需要）
function addNewBook(name, author, status) {
    const newBook = new Book(name, author, status);
    addBookToLibrary(newBook);
    addBookToTable(); // 重新渲染表格
}

HTML 部分 #

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Author</td>
            <td>Status</td>
            <td>Operations</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<!-- 可选：新增书籍的表单示例 -->
<form onsubmit="event.preventDefault(); addNewBook(this.name.value, this.author.value, this.status.value)">
    <input type="text" name="name" placeholder="Book name" required>
    <input type="text" name="author" placeholder="Author" required>
    <select name="status">
        <option value="Read">Read</option>
        <option value="Not read">Not read</option>
    </select>
    <button type="submit">Add Book</button>
</form>

说明 #

1. 唯一ID生成：用Date.now() + Math.random()生成近似唯一的ID，确保每个书籍实例都有独立标识
2. 数据与DOM关联：通过data-book-id属性将表格行和数组中的书籍绑定，删除时能精准定位
3. 同步更新：删除函数先修改数据数组，再删除对应DOM元素，保证数据和页面展示一致
4. 重复渲染处理：addBookToTable开头清空tbody，新增书籍时调用此函数不会出现重复行

内容的提问来源于stack exchange，提问作者Master1