Express - Delete

Lesson Objectives#

Create a Delete Route
Make the index page send a DELETE request

Delete#

#	Action	URL	HTTP Verb	EJS view filename
1	Index	/fruits/	GET	index.ejs
2	Show	/fruits/:index	GET	show.ejs
3	New	/fruits/new	GET	new.ejs
4	Create	/fruits/	POST	none
5	Edit
6	Update
7	Destroy	/fruits/:index	DELETE	none

Create a Delete Route#

Inside our server.js file, add a DELETE route:

app.delete('/fruits/:index', (req, res) => { fruits.splice(req.params.index, 1); //remove the item from the array res.redirect('/fruits');  //redirect back to index route});

Test it using:

curl -X DELETE localhost:3000/fruits/1

See our index.ejs has only two list item fruits, apple, banana

curl localhost:3000/fruits/

Make the index page send a DELETE request#

Inside our index.ejs file, add a form with just a delete button.

<!DOCTYPE html><html lang="en" dir="ltr">  <head>    <meta charset="utf-8">    <title>Index of Fruits</title>    <link rel="stylesheet" href="main.css">  </head>  <body>    <h1>Index of Fruits</h1>    <nav>      <a href="/fruits/new">Create a New Fruit</a>    </nav>    <ul>    <% fruits.forEach((fruit, index) => { %>      <li>    <a href="/fruits/<%=index%>"> <%= fruit.name %></a>    <!--  ADD DELETE FORM HERE-->    <form>     <input type="submit" value="DELETE"/>    </form>   </li>    <% }) %>    </ul>  </body></html>

When we click "DELETE" on our index page (index.ejs), the form needs to make a DELETE request to our DELETE route.

The problem is that forms can't make DELETE requests. Only POST and GET. We can fake this, though. First we need to install an npm package called method-override

npm install method-override

Now, in our server.js file, add:

//include the method-override packageconst methodOverride = require("method-override");//...//after app has been defined//use methodOverride.  We'll be adding a query parameter to our delete form named _methodapp.use(methodOverride("_method"));

Now go back and set up our delete form to send a DELETE request to the appropriate route

<form action="/fruits/<%= index %>?_method=DELETE" method="POST">