When developing a booking platform, I encountered an issue with deleting text and buttons. Since my delete button has two classes, using className could not properly identify the specific class needed for deletion. Additionally, the event was not being applied to the element. Is there a solution to correct this behavior of the 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>