动态DOM绑定删除事件时对象数组后续元素被误删如何修复？

你遇到的批量删除问题核心是事件重复绑定，其次是依赖数组索引作为唯一ID的设计缺陷：

• 在populateBooks的数组循环逻辑中，你每生成1张新卡片，就会选中所有已经生成的卡片，给它们全部绑定一次指向当前循环索引的删除事件。比如循环到第3个元素（索引2）时，前2张卡片也会被绑定上删除索引2的事件，点击任意卡片都会触发多次删除回调，自然会删掉多个元素。
• 依赖数组索引作为图书唯一ID的设计，在数组变动后索引会整体偏移，也容易触发逻辑异常。

直接修改populateBooks函数，移除循环内的全量绑定逻辑，只给当前生成的单张卡片绑定对应删除事件即可，修改后的代码如下：

function populateBooks(myLib, bookView) {
  const bookCards = document.querySelectorAll('.book-card')
  bookCards.forEach(bookCard => bookList.removeChild(bookCard));
  myLib.forEach((book, index) => {
    book.id = index;
    const cardContent = `<div class="book-card" data-index=${book.id}>
                            <div class="card-info-wrapper">
                                <h2>${book.title}</h2>
                                <h3>${book.author}</h3>
                                <h4>${book.pages} Pages</h4>
                                <p>${book.info()}</p>
                            </div>
                            <div class="card-menu">
                                <div class="button" id="remove-btn">
                                    Remove
                                </div>
                            </div>
                    </div>`
    const element = document.createElement('div');
    element.innerHTML = cardContent;
    const currentCard = element.firstChild;
    bookView.appendChild(currentCard);
    // 仅给当前生成的单张卡片绑定事件，无需选中所有卡片
    const removeButton = currentCard.querySelector('.button');
    removeButton.addEventListener('click', () => {
      removeBook(book.id)
    })
  });
};

你目前采用的数据变更后全量重渲染所有DOM的实现方式，属于小型项目的可接受方案：

• 优势：逻辑简单直观，不需要额外维护DOM和数据的对应关系，不容易出逻辑漏洞，适合数据量低于100条的轻量场景。
• 劣势：每次修改都要销毁重建所有DOM，数据量大的时候性能损耗明显，如果后续要扩展阅读状态切换、排序等功能，全量重渲会丢失页面状态（比如滚动位置、用户临时输入）。
  如果要优化可以改成增量更新：删除数据后只移除对应ID的DOM节点，不需要重新渲染所有卡片，性能会更好。

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