JavaScript实现表格行删除同步删除localStorage数据需求

你的代码目前存在几个关键问题，导致无法同步删除localStorage中的书籍数据：

• 表格行未绑定对应书籍的唯一ID，无法定位到要删除的localStorage条目
• 删除函数未正确获取并操作localStorage中的数据
• 同时存在原生JS的onclick和jQuery的事件委托，容易引发冲突

以下是修改后的完整解决方案：

1. 修改Display类的add方法，给表格行绑定书籍ID #

生成表格行时，将书籍的id通过data-book-id属性绑定到<tr>上，同时避免重复的id属性：

class Display {
    add(book) {
        console.log('Adding to UI');
        let tableBody = document.getElementById('tableBody');
        // 给tr添加data-book-id存储书籍ID，移除重复的id="tableBody"
        let uiString = `<tr data-book-id="${book.id}">
                            <td>${book.name}</td>
                            <td>${book.author}</td>
                            <td>${book.type}</td>
                            <td><input type="button" value="Delete Row" class="btn btn-outline-danger"></td>
                        </tr>`;
        tableBody.innerHTML += uiString;

        // 保存数据到localStorage，处理初始为空的情况
        let books = JSON.parse(localStorage.getItem("books")) || [];
        if (!books.some((oldBook) => oldBook.id === book.id)) {
            books.push(book);
            localStorage.setItem("books", JSON.stringify(books));
        }
    }
}

2. 统一用jQuery事件委托处理删除逻辑 #

移除原生的onclick="RemoveRow()"，通过jQuery事件委托获取点击行对应的书籍ID，再从localStorage中删除对应数据：

// 删除原有的RemoveRow函数和重复事件绑定，替换为以下代码
$('#tableBody').on('click', 'input[type="button"]', function(e){
    // 获取当前行绑定的书籍ID
    const bookId = $(this).closest('tr').data('book-id');
    // 从DOM中删除该行
    $(this).closest('tr').remove();

    // 从localStorage中删除对应书籍
    let books = JSON.parse(localStorage.getItem("books")) || [];
    // 过滤掉要删除的书籍
    books = books.filter(book => book.id !== bookId);
    // 将修改后的数据存回localStorage
    localStorage.setItem("books", JSON.stringify(books));
});

3. 补充：页面加载时从localStorage渲染书籍 #

确保页面刷新后能显示最新的书籍列表，需要添加页面初始化时的渲染逻辑：

class Display {
    // 新增渲染方法
    renderBooks() {
        let tableBody = document.getElementById('tableBody');
        let books = JSON.parse(localStorage.getItem("books")) || [];
        tableBody.innerHTML = ''; // 清空原有内容
        books.forEach(book => {
            let uiString = `<tr data-book-id="${book.id}">
                                <td>${book.name}</td>
                                <td>${book.author}</td>
                                <td>${book.type}</td>
                                <td><input type="button" value="Delete Row" class="btn btn-outline-danger"></td>
                            </tr>`;
            tableBody.innerHTML += uiString;
        });
    }
}

// 页面加载完成后调用渲染
document.addEventListener('DOMContentLoaded', () => {
    const display = new Display();
    display.renderBooks();
});

核心要点： #

• 通过data-book-id属性关联DOM行与localStorage中的书籍数据，是实现同步删除的关键
• 操作localStorage必须遵循「读取→修改→存回」的流程，不能直接操作未定义的变量
• 统一事件处理方式，避免原生JS与jQuery的事件冲突

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