原生JS点击移除按钮仅删除对应父级card元素的问题修复

• 第一种写法错误：点击回调中遍历了全量.card元素集合cards，对集合内所有卡片都执行删除操作，因此会清空所有卡片。
• 第二种写法错误：
  1. 代码中card/remove/div/cards/cardDiv均未添加let/const声明，会成为隐式全局变量，每次执行add函数都会将全局card覆盖为最新创建的卡片，因此回调中永远只能拿到最后一个创建的卡片
  2. 箭头函数不存在独立的this绑定，写法中this.card无法指向当前按钮关联的卡片实例
• 额外冗余问题：循环创建书籍信息div时反复执行querySelectorAll查询DOM，属于不必要的性能损耗，直接操作当前新创建的元素即可。

核心思路：不需要查询全量卡片做遍历，点击移除按钮时，只删除当前按钮所属的父级卡片即可。
修复后完整可运行代码：

function add() {
    // 所有变量提前声明，避免隐式全局污染
    const newBook = new addBookToLibrary(`"${author.value}"`, `${title.value}`, `${pages.value} pages`);

    // 创建当前卡片节点
    const card = document.createElement('div');
    card.classList.add('card');
    main.appendChild(card);

    // 追加书籍信息，直接操作当前创建的节点，无需重复查询DOM
    Object.values(newBook).forEach(infoText => {
        const infoDiv = document.createElement('div');
        infoDiv.textContent = infoText;
        card.appendChild(infoDiv);
    })

    // 创建移除按钮
    const removeBtn = document.createElement('div');
    removeBtn.textContent = 'Remove';
    removeBtn.classList.add('remove');
    card.appendChild(removeBtn);

    // 绑定删除事件：两种写法二选一即可
    removeBtn.addEventListener('click', () => {
        // 写法1：利用函数闭包直接拿到当前作用域下的card节点
        card.remove();
        // 写法2：通过DOM关系直接取当前按钮的父元素，不需要依赖闭包
        // removeBtn.parentElement.remove();
    })
};

submit.addEventListener('click', add);

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