Deleting an article

Summary

In this final part of the CRUD chapter, we focus on implementing the delete functionality. We create a route and action to handle deleting articles, using Article.destroyOne() to remove the article by its ID. After deletion, the user is redirected back to the articles page. A delete button is added to the article view using a form that sends a POST request to the delete route. This completes the CRUD operations in the application.

Transcript

Okay, so we are down to the final part of the CRUD chapter of this course, and that is the delete in CRUD.

We’ve already covered create, read, and update in the previous lessons. Now, we’re going to implement delete. To delete an article, we need a button or a form with a button inside it. When clicked, it will delete the article and redirect the user back to the articles page.

Here’s how we’ll set it up:

1. Define a route:
   We’ll set up a POST request to /articles/:id/delete.

2. Generate the action:
   Run the command:

   sails generate action articles/delete-article  

3. Implement the action:
   In delete-article.js, we’ll:

   • Accept the id of the article to delete (type number, required).

   • Use Article.destroyOne({ id }) to delete the article.

   • Redirect back to /articles after deletion.

   Here’s the code:

   await Article.destroyOne({ id });  
   return exits.success({ redirect: '/articles' });  

4. Add the delete button:
   In article.ejs, add a form with a delete button:

   <form action="/articles/<%= article.id %>/delete" method="POST">  
     <button type="submit">Delete</button>  
   </form>  

   Run HTML

5. Test the Functionality:

   • Open Firefox and refresh the page.

   • Click the delete button for an article.

   • Verify the article is deleted and the user is redirected to /articles.

Recap:

• Created a delete-article action.

• Used destroyOne to delete the article by its id.

• Redirected the user back to /articles after deletion.

And that’s how you implement delete in our CRUD structure!