如何在DOM元素删除时同步删除myLibrary数组中的对应书籍对象

问题场景 #

开发图书馆Web应用时，点击按钮弹出表单添加书籍，书籍会同时生成DOM卡片并加入myLibrary数组。但删除卡片后，数组中的书籍对象并未移除，尝试过添加唯一ID、匹配标题删除均未成功。

解决方案 #

核心思路是给每个书籍对象分配唯一标识ID，让DOM元素和数组项一一对应，删除时通过ID同步更新DOM和数组：

1. 给Book构造函数添加唯一ID

用自增计数器给每本书分配唯一ID，避免标题重复导致的误删问题：

let bookIdCounter = 1; // 全局计数器，确保每个ID唯一

function Book(title, author, pages, haveRead) {
  this.id = bookIdCounter++; // 给每本书分配唯一ID
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.haveRead = haveRead;

  if (alreadyInLibrary(title)) {
    alert("Sorry, it looks like this book is already in your library");
    return;
  }
  addBooKToLibrary(this);
}

2. 生成卡片时绑定ID到DOM元素

修改createCard函数，把书籍ID绑定到卡片的自定义属性上，同时传给删除按钮的点击事件：

function createCard() {
  cards.innerHTML = "";
  myLibrary.forEach((book) => {
    let html = `
      <div class="card" data-book-id="${book.id}">
        <p>${book.title}</p>
        <p>${book.author}</p>
        <p>${book.pages}</p>
        <p>${book.haveRead}</p>
        <button class="remove-btn" onclick="deleteBook(${book.id})">Delete</button>
      </div>
    `;
    cards.innerHTML += html;
  });
}

3. 修改deleteBook函数同步删除数组项和DOM

通过ID精准定位数组中的书籍并移除，同时更新DOM保证状态一致：

function deleteBook(bookId) {
  // 过滤数组，移除对应ID的书籍
  myLibrary = myLibrary.filter(book => book.id !== bookId);
  // 重新渲染所有卡片，确保DOM与数组状态完全同步
  createCard();
}

可选优化：单独删除DOM元素

如果不想每次删除都重新渲染全部卡片，也可以直接定位并删除对应DOM元素：

function deleteBook(bookId) {
  // 移除数组项
  myLibrary = myLibrary.filter(book => book.id !== bookId);
  // 找到对应DOM卡片并删除
  const cardToDelete = document.querySelector(`.card[data-book-id="${bookId}"]`);
  if (cardToDelete) {
    cardToDelete.remove();
  }
}

失败原因分析 #

• 仅匹配标题删除：存在同名书籍时会误删其他项，且删除DOM后未同步更新数组；
• 未关联ID与DOM：仅给数组项添加ID但未绑定到DOM元素，无法通过DOM操作定位对应数组项。

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