Odin Project图书馆项目：点击删除library数组对象元素求助

看起来你已经搭好了基础的卡片生成逻辑，但核心问题是没有把DOM卡片和library数组里的对应项建立关联——当前所有卡片的ID都是固定的id_num，删除按钮也没有传递要删除的索引，所以自然没法定位到数组里的对应元素。下面是具体的解决步骤：

1. 给卡片和删除按钮绑定数组索引 #

当你把新书推送到library数组后，新书的索引就是library.length - 1（因为数组索引从0开始，刚添加的元素是最后一个）。我们可以用这个索引来给卡片和删除按钮做标记：

修改addBookCard函数里的这部分代码：

// 刚push完新书，获取它的索引
const bookIndex = library.length - 1;

// 给卡片设置唯一ID，关联索引
createCard.setAttribute("id", `card-${bookIndex}`);
// 给删除按钮的点击事件传递索引
deleteBtn.setAttribute("onclick", `remove(${bookIndex})`);

2. 编写remove函数处理删除逻辑 #

现在删除按钮会把对应的索引传过来，我们需要实现remove函数，同时完成两个操作：从library数组中删除对应项，以及移除页面上的DOM卡片：

function remove(index) {
  // 1. 从library数组中删除对应索引的书籍
  library.splice(index, 1);
  // 2. 删除页面上对应的卡片
  const cardToRemove = document.getElementById(`card-${index}`);
  cardToRemove.remove();
}

3. 优化小细节 #

• 你的hide函数里的样式设置可以简化，建议把布局样式放到CSS类中，避免用JS直接写样式：

const hide = () => {
  const form = document.querySelector("#hide");
  form.style.display = form.style.display === "none" 
    ? "flex" 
    : "none";
};

• 推荐用addEventListener代替onclick属性绑定事件，代码更清晰且易维护：

// 替换原来的deleteBtn.setAttribute("onclick", "remove()")
deleteBtn.addEventListener('click', () => remove(bookIndex));

这样修改后，每个删除按钮点击时都会传递对应书籍在library数组里的索引，就能精准删除数组项和对应的DOM卡片了。

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