我如何在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

您可以使用Element#matches:

检查元素是否匹配CSS选择器

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

Answer 2

既然你的事件检查一个名为"没有元素被删除，因为没有一个元素与这个类相关联。

类是通用的，由DOM的不同元素使用。
你应该考虑使用id和其他HTML元素来封装javascript代码中要选择的元素，以便只针对要删除的元素。对于具有多个类的元素，也可以考虑使用classList而不是className。只需在标签的class属性中列出以空格分隔的类，就可以将元素关联到多个类。

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