How to delete an item in expressJS view - node.js

Question

I am building an ExpressJS app and want to add a delete icon on a collection to delete individual items.
I am a bit confused how to do this.
One method I thought of is binding a click event to the icon in the express view and doing an ajax call to the server when clicked.
Another method is to create a form around the icon and the icon will be a button that when clicked submits the form.
I am not confident of the two approaches, anybody have thought on an elegant way to do this the express way

Answer 1

i recommend the second method because it's more easy to understand at this moment.
from your words i understand the delete button could be vulnerability or security hole if you did in the wrong way. Sure it's delete button on any way.
the most easy way to do it with more secure is to use session variable.
the user can't delete unless he is authorized (logged in). if so then you open session on your server and give the user the key of that session.
In the session you can store securely data about the user who interact with the server via providing the session key you gave him at login process.
at this step the user will click the button to delete document but guess what he should be authorized to delete this document. This the time for session key he provide to you to inform you his identity. then the decision is up to you either to delete or reject his request.
all of the above word are concept of what will happen in the code.
i will write two part one part for the login controller to give the user authorization. And the second is the delete document controller.
login:
if(var user = isUser(username, password){
//open session
req.session.user_id = user._id
}
delete document controller:
if(req.session.user_id){
//if true that means he is logged in authorized user
//you can also to check by his user_id if he has the privilege to delete the document
document.delete();//in mongoose model.remove();
}
this solution is for security in deleting any document.

Answer 2

There are multiple ways you can achieve the result you seek.
You could use a link that has the id of the item you want to delete YourURL.com/item/delete/id and attach a click event to it. When the link is clicked your handler should be able to get the id query params and use it to make an AJAX call to the server.
Also, you can use a button like you said, which is basically the same thing as the one above
Bottom line is, both methods are pretty standard, some people could use hidden elements, HTML elements, almost anything that can store an ID or a value, but you will find that most people also use the above methods as well, Which IMHO is pretty standard.
Below is a snippet of how it should work, I am not sure if you are using any Javascript libraries so I scripted it with Vanilla Javascript, if you are not using any Javascript libraries or frameworks I strongly advice you do, it helps reduce a lot of headaches you get from browser difference in the way the handle Javascript.
PS: Include codes you have tried to help give context to how your question could be answered.
var makeDeleteCall = function(e, id) {
e.preventDefault();
console.log(id);
// Make AJAX Call here to server to delete item with the ID
//After call to remote server you can then update the DOM to remove the item
document.getElementById(id).remove();
}
<!-- Using Link -->
<a href="#/delete/1" onclick="makeDeleteCall(event, 1);" id="1">
Delete Item
</a>
<br/>
<br/>
<!-- Using a Button-->
<button onclick="makeDeleteCall(event, 2);" id="2">
Delete Button
</button>
Link to JSFiddle