删除图片父元素异常：点击任意删除图标均删除最后创建卡片

核心问题原因 #

1. 提交逻辑的计数器错误：每次点击提交按钮时，counter是局部变量且每次都重置为0，导致始终调用myLibrary[0].createCard()，重复创建第一张图书的卡片，而非刚添加的新卡片。
2. 全局变量污染：removeCard是全局变量，每次创建卡片都会覆盖它，虽不会直接导致删除错误，但不符合作用域最佳实践，可能引发意外问题。
3. 内联事件的潜在问题：字符串形式的onclick存在作用域混淆风险，且parentNode.parentNode依赖固定DOM结构，鲁棒性差。
4. 显示切换函数的语法错误：changeDisplay中用赋值运算符=替代了比较运算符==，导致切换逻辑失效。

修复后的完整代码 #

let content = document.getElementById('contentContainer');
let books = document.querySelector('.books');
let addBook = document.getElementById('addBook');
let submit = document.querySelector('button');
let bookTitle = document.getElementById('title');
let bookAuthor = document.getElementById('author');
let bookStatus = document.getElementById('status');

let myLibrary = [];
let cardColor;

function Book(title, author, currentStatus, present) {
    this.title = title;
    this.author = author;
    this.currentStatus = currentStatus;
    this.present = present
}

Book.prototype.createCard = function () {
    let newCard = document.createElement('div');
    let textContainer = document.createElement('div');
    let titleText = document.createElement('p');
    let authorText = document.createElement('p');
    let imgContainer = document.createElement('div');
    let btnContainer = document.createElement('div');
    let btnRead = document.createElement('button');
    let btnNotRead = document.createElement('button');
    // 将removeCard改为局部变量
    let removeCard = document.createElement('img');

    if (cardColor == true) {
        newCard.style.borderColor = "green";
    } else if (cardColor == false) {
        newCard.style.borderColor = "red";
    }

    newCard.className = "book";
    // 移除重复id，或改为动态唯一id
    // newCard.id = `book-card-${myLibrary.length - 1}`;
    textContainer.className = "textContainer";
    imgContainer.className = "imgContainer";
    removeCard.setAttribute("src", "imgs/book-remove-outline.svg");
    removeCard.className = "removeCard";
    btnContainer.className = "btnContainer";
    btnRead.className = "btnRead";
    btnNotRead.className = "btnNotRead";

    // 使用addEventListener绑定删除事件，用closest精准定位卡片
    removeCard.addEventListener('click', function() {
        this.closest('.book').remove();
    });

    books.appendChild(newCard);
    newCard.appendChild(textContainer);
    newCard.appendChild(btnContainer);
    btnContainer.appendChild(btnRead);
    btnContainer.appendChild(btnNotRead);
    textContainer.appendChild(titleText);
    textContainer.appendChild(authorText);
    newCard.appendChild(imgContainer);
    imgContainer.appendChild(removeCard);

    titleText.textContent = this.title;
    authorText.textContent = `by: ${this.author}`;
    btnRead.textContent = "Read";
    btnNotRead.textContent = "Not Read";
}

function addBookToLibrary() {
    let newBook = new Book(bookTitle.value, bookAuthor.value, bookStatus.value);
    if (newBook.currentStatus == "read") {
        cardColor = true;
    } else if (newBook.currentStatus == "not read") {
        cardColor = false;
    }
    myLibrary.push(newBook);
}

function changeDisplay() {
    // 修复比较运算符错误
    if (content.style.display == "none") {
        content.style.display = "flex";
    } else {
        content.style.display = "none";
    }
}

addBook.addEventListener('click', function() {
    changeDisplay();
});

submit.addEventListener('click', function(event) {
    if (bookTitle.value == '' || bookAuthor.value == '') {
        return;
    }
    event.preventDefault();
    addBookToLibrary();
    // 调用刚添加的最后一个图书的createCard方法
    myLibrary[myLibrary.length - 1].createCard();
});

关键修复点说明 #

• 提交逻辑：移除无效的counter变量，直接操作myLibrary的最后一个元素，确保每次创建的是新添加的图书卡片。
• 删除事件：改用addEventListener绑定事件，通过closest('.book')精准找到当前点击图标所属的卡片，不受DOM结构变化影响。
• 变量作用域：将removeCard改为局部变量，避免全局污染。
• 显示切换：修复比较运算符错误，确保弹窗显示/隐藏逻辑正常工作。

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