How to add DELETE operation to a button Node.js - html

Question

I want to add a delete functionality to a button that's part of a card which is encapsulated in a form this is as far I got:
<form class="form-events" action="/delete" method="post">
<% events.forEach( function (event) { %>
<div class="card col-lg-3" style="width: 18rem;">
<img class="card-img-top">
<div class="card-body">
<h5 class="card-title"><%= event.title %></h5>
<p class="card-text"><%= event.description %></p>
<p class="card-text"><%= event.date %> </p>
<p class="card-text"><%= event.capacity %></p>
Update
<button onclick="this.form.submit()" value="<%= event._id %> " name="deletebtn" class="btn btn-danger">Delete</button>
</div>
</div>
<% }); %>
</form>
And this is the route for it:
// Delete an event
app.post("/delete", function (req, res) {
const deletedItemId = req.body.deletebtn;
Event.findByIdAndRemove(deletedItemId, function (err) {
if (!err) {
console.log("Successfully deleted");
res.redirect("/admin");
} else {
console.log(err);
}
});
});
I get this error when I press the delete button:
reason: Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex
characters

Answer 1

Okay, this is how I solved I am not sure if it's the correct way, but it works.
Form admin.ejs
<% events.forEach( function (event) { %>
<form class="form-events" action="/delete" method="post">
<div class="card col-lg-3" style="width: 18rem;">
<img class="card-img-top">
<div class="card-body">
<h5 class="card-title"><%= event.title %></h5>
<p class="card-text"><%= event.description %></p>
<p class="card-text"><%= event.date %> </p>
<p class="card-text"><%= event.capacity %></p>
Update
<button name="deleteBtn" value="<%=event._id%>" type="submit" class="btn btn-danger">Delete</button>
</div>
</div>
<% }); %>
</form>
The app.js for the route
app.post("/delete", function (req, res) {
const deletedItemId = req.body.deleteBtn;
Event.findByIdAndDelete(deletedItemId, function (err) {
if (!err) {
console.log("Successfully deleted");
res.redirect("/admin");
} else {
console.log(err);
}
});
});
Now it works perfectly and for the database, but most stuff I googled where showing to use
/*for the route */
app.delete(“delete/:id”), function()
/*for the form */
<form method="POST" action="/delete/<%= event._id%>?_method=DELETE">
<button type="submit">Delete</button>
</form>
which I tried but got ran into some errors again and return to the original one which works, I don't really understand the whole app.post, app.delete because you also use the action /delete and then you can just remove it using mongoose, also I am not sure but for the form method in HTML it's said you only can use post and put, which confused me even more....