如何解决含多个class的DOM元素绑定特定class事件的className问题？

一、修复删除按钮的匹配逻辑 #

你遇到的核心问题是：使用className === "deleteButton"做全等判断时，按钮的className返回的是多个class组成的完整字符串（比如"bookButton1 deleteButton"），直接全等匹配必然失败。改用classList.contains()方法可以精准检查元素是否包含目标class，完美解决多class匹配问题。

修改后的JavaScript代码：

let deleteObject = document.querySelector("main");
deleteObject.addEventListener("click", event => {
  // 检查点击元素是否包含deleteButton类
  if (event.target.classList.contains('deleteButton')) {
    // 获取对应的书籍文本元素（当前按钮的前一个兄弟p标签）
    const bookText = event.target.previousElementSibling;
    // 同时删除按钮和对应的文本
    bookText.remove();
    event.target.remove();
  }
});

代码说明： #

• classList.contains('deleteButton')：不管元素有多少个class，只要包含deleteButton就会返回true，不受其他class影响。
• previousElementSibling：利用你当前的HTML结构，按钮的前一个兄弟就是对应的书籍文本p标签，直接获取后删除，比操作父元素更精准。

二、给多Class元素的特定Class绑定事件的两种方式 #

方式1：事件委托（推荐） #

就是你当前采用的给父元素绑定事件、通过判断目标元素class处理逻辑的方式。这种方式适合动态生成的元素（比如后续添加的书籍按钮），只需要绑定一次事件，性能更优，还能避免重复绑定的问题。

方式2：直接选择目标元素绑定 #

如果元素是页面加载时就存在的静态元素，可以直接选中所有带deleteButton类的元素，逐个绑定事件：

// 选中所有带deleteButton类的按钮
const deleteButtons = document.querySelectorAll('.deleteButton');
deleteButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 删除当前按钮和对应的书籍文本
    this.previousElementSibling.remove();
    this.remove();
  });
});

额外优化建议：调整HTML结构 #

当前的书籍文本和按钮是并列的兄弟元素，建议把每一组包裹在一个容器里，结构更清晰，后续删除逻辑也更简单：

<main>
  <form action="" class="search">
    <input type="text">
  </form>

  <div class="book-item">
    <p class="book1">Harry Potter</p>
    <button class="bookButton1 deleteButton">Delete</button>
  </div>

  <div class="book-item">
    <p class="book2">Lord of The Ring</p>
    <button class="bookButton2 deleteButton">Delete</button>
  </div>

  <!-- 其他内容保持不变 -->
</main>

对应的删除逻辑可以简化为：

if (event.target.classList.contains('deleteButton')) {
  // 删除整个书籍项容器
  event.target.parentElement.remove();
}

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