如何在JavaScript中实现按钮删除数组myLibrary中的图书项？

问题根源 #

你的删除功能失效主要有三个原因：

1. 索引查找错误：remBook函数里用element === book判断，这里的book是构造函数，不是当前要删除的图书对象，永远找不到匹配项。
2. 数组操作错误：slice方法仅返回截取的数组片段，不会修改原数组myLibrary，无法真正删除元素。
3. 未传递目标图书：删除按钮的点击事件没有把当前对应的图书对象传给remBook，函数不知道要删除哪一本。

修复步骤 #

1. 修正遍历参数名避免冲突

在displayBooks的forEach里，参数名和全局数组myLibrary重名了，会导致内部变量覆盖全局数组，把参数名改成book：

myLibrary.forEach((book) => { // 原参数是myLibrary，改为book
  let card = document.createElement("div");
  card.classList.add("card");
  currentDisplay.appendChild(card);

  // ... 其余渲染代码不变
});

2. 绑定删除按钮的目标图书

创建删除按钮时，用箭头函数把当前图书对象传递给remBook：

const remBtn = document.createElement("button");
card.appendChild(remBtn);
remBtn.textContent = "Remove";
remBtn.onclick = () => remBook(book); // 传递当前book对象

3. 重写删除函数

修改remBook函数，接收目标图书对象，找到索引后用splice修改原数组，最后重新渲染图书列表：

function remBook(targetBook) {
  const bookIndex = myLibrary.findIndex(element => element === targetBook);
  if (bookIndex !== -1) { // 确保找到有效索引
    myLibrary.splice(bookIndex, 1); // 从原数组删除对应元素
    displayBooks(); // 重新渲染更新后的图书列表
  }
}

完整修复后的JS代码 #

// Data inputs
let myLibrary = [
  {
    title: "test",
    author: "test",
    page: "123",
    read: true,
  },
];

// Object constructor
function book(title, author, page, read) {
  this.title = title;
  this.author = author;
  this.page = page;
  this.read = read;
}

// Add new books to library
function addBookToLibrary() {
  let a = document.getElementById("formTitle").value;
  let b = document.getElementById("formAuthor").value;
  let c = document.getElementById("formPage").value;
  let d = document.getElementById("formRead").checked;

  if (a !== "" && b !== "" && c !== "") {
    myLibrary.push(new book(a, b, c, d));
  }
}

const submit = document.getElementById("submitInput");
submit.addEventListener("submit", () => {
  event.preventDefault();
  addBookToLibrary();
  submit.reset();
  displayBooks();
});

// Display each book as cards
function displayBooks() {
  const currentDisplay = document.querySelector(".currentDisplay");
  currentDisplay.textContent = "";

  myLibrary.forEach((book) => { // 修改参数名避免冲突
    let card = document.createElement("div");
    card.classList.add("card");
    currentDisplay.appendChild(card);

    for (let key in book) { // 这里也对应改成book
      const text = document.createElement("p");
      text.textContent = `${key}: ${book[key]}`;
      card.appendChild(text);
    }
    const readBtn = document.createElement("button");
    card.appendChild(readBtn);

    if (book.read === true) { // 对应改成book
      readBtn.textContent = "Read";
    }
    if (book.read === false) { // 对应改成book
      readBtn.textContent = "Not Read";
    }

    readBtn.addEventListener("click", () => {
      if (readBtn.textContent === "Read") {
        readBtn.textContent = "Not Read";
        book.read = false; // 对应改成book
      } else if (readBtn.textContent === "Not Read") {
        readBtn.textContent = "Read";
        book.read = true; // 对应改成book
      }
    });
    const remBtn = document.createElement("button");
    card.appendChild(remBtn);
    remBtn.textContent = "Remove";
    remBtn.onclick = () => remBook(book); // 传递当前book对象
  });
}

// Remove book function
function remBook(targetBook) {
  const bookIndex = myLibrary.findIndex(element => element === targetBook);
  if (bookIndex !== -1) {
    myLibrary.splice(bookIndex, 1);
    displayBooks();
  }
}

displayBooks();

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