Skip to main content

Express - Delete

Lesson Objectives​

  1. Create a Delete Route
  2. Make the index page send a DELETE request

Delete​

#ActionURLHTTP VerbEJS view filename
1Index/fruits/GETindex.ejs
2Show/fruits/:indexGETshow.ejs
3New/fruits/newGETnew.ejs
4Create/fruits/POSTnone
5Edit
6Update
7Destroy/fruits/:indexDELETEnone

Create a Delete Route​

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

server.js
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.

views/index.ejs
<!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:

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

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

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