当我的元素有多个类时，如何在 DOM 中的特定类上应用事件？

Question

我正在设计一个预订网站，我想通过单击删除按钮删除整个文本和删除按钮，因为我的按钮有两个

classes

，

className

不会检索特定的

class

名称和

 event

没有应用到元素上，那么对于这种

className

行为有什么解决方案吗？

let deleteObject = document.querySelector("main");
deleteObject.addEventListener("click", event => {
  if (event.target.className === "deleteButton") {
    event.target.parentElement.parentElement.removeChild(event.target.parentElement)
  }
})

main {
  display: grid;
  grid-template: repeat(5, 35px)/repeat(2, 200px);
  justify-items: center;
  align-items: center;
}

.search {
  grid-row: 1;
  grid-column: 1/span2;
}

.book1 {
  grid-row: 2;
  grid-column: 1;
}

.book2 {
  grid-row: 3;
  grid-column: 1;
}

.hide {
  grid-row: 4;
  grid-column: 1/span2;
  margin-left: 0;
}

.bookButton1 {
  grid-row: 2;
  grid-column: 2;
}

.bookButton2 {
  grid-row: 3;
  grid-column: 2;
}

.add {
  grid-row: 5;
  grid-column: 1/span2;
}

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

  <p class="book1">Harry Potter</p>
  <button class="bookButton1 deleteButton">Delete</button>

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


  <div class="hide">
    <input type="checkbox" id="hide">
    <label for="hide">Hide All</label>
  </div>

  <form class="add">
    <input class="addBook" type="text" placeholder="e.g Harry Potter" name="" id="">
    <button class="add">Add</button>
  </form>
</main>

Answer 1

您可以检查元素是否与 CSS 选择器匹配

Element#matches

:

if (event.target.matches('.dr'))

Answer 2

由于您的事件检查名为“dr”的类，因此没有元素被删除是预期的行为，因为没有与该类关联的单个元素。

类是通用的，由 DOM 的不同元素使用。
您应该考虑使用 ID 以及其他 HTML 元素来封装要在 JavaScript 代码中选择的元素，以便仅针对要删除的元素。 还可以考虑在具有多个类别的元素上使用

classList

而不是

className

。通过简单地在标签的类属性中列出以空格分隔的类，一个元素可以关联到多个类。

<span class="firstClass secondClass">Foo</span>