- [Voiceover] Handling the delete method is going to be similar to working with the post method. So here I am in my feedback dot js file, that's this file right here in the public folder, and what we need to do is add an additional element right underneath here and it's essentially going to be our button. So I'm going to type in some bootstrap code here to create the button. And what I want to do here is make sure that I create an ID that has the index of which item this is.
So, remember I have a list of items that people have typed in, and I need to make sure that I know which one people are clicking on, so, on each one of these buttons I'm going to give them an ID using the key that we get right here as we go through each one of the items. All right, let's go ahead and save that, and switch back over to our application, and you can see the button right here. So now that we have the button, it's time to wire it up. So in the same file, we're going to create an additional sort of sequence and it's going to be similar to what we've been doing before, but instead of using get or post, we're of course going to use delete.
If I just detect a click on the messages, what would happen is if I click anywhere, not just in this button, so if I clicked even on the text, or if I wanted to select some text, that click would actually start deleting my items, so I want to make sure that it's only if I've clicked on one of these items. So I will check to make sure that the target of the click has a class name of glyph icon and glyph icon-remove, so both of these classes are in there.
And then if that's true, then I'm going to execute an ajax request. So this ajax request is sort of like the post request above but it's sort of a little less flexible. I have to submit a few more things in here and what I do is pass along an object with the url of the request, which is going to be api and then slash and then it's going to get the ID from the target.
So the event target ID, and I'm getting this from the fact that when I click on that element, right, which should be this button right here, then that element is going to have an ID with this key right here. So, target ID, then I need to specify the type of request, and this will be delete, and then finally, what happens when this request is successful.
And of course I want to run that update feedback method again. Let's go ahead and comma these. All right, so let's go ahead and save that, and I'll make this bigger. Now I need to worry about the api route, and as I mentioned, this is going to be pretty similar to what we were doing with this post route. So I'm going to copy this and of course this is going to be a delete route and this time I'm going to receive an item, or I'll just call this an ID here, and that will be coming through the request so feedback data, and what I want to do here is not really add something to feed data, but I want to delete one of the elements.
I'm going to make sure that I just don't output anything to the console, that I only output an error if there is an error message. So let's go ahead and do that on both of these, save this, and we'll go back to the browser. Let's go ahead and add sort of a funny kind of a message here that we can delete. And then when I click on this, it will delete that message. And let's go ahead and delete this notes, and it deletes that one as well.
In this course, Ray Villalobos walks through the process of creating full-featured websites with these technologies. First, find out how to install each package and leverage Node.js features from within Express. Then learn how to build a basic application with templating engines like EJS; create more flexible, modular code with includes and conditional statements; build APIs to manage HTTP requests to add and delete content dynamically; and configure more complex routing. Along the way, Ray implements features like customer feedback forms and real-time live chat, so you can see exactly what Node.js and Express are capable of.
- Handling HTTP requests with Node.js and Express
- Creating and modularizing routes
- Using templates
- Building flexible views
- Creating an API route
- Dealing with POST and DELETE requests
- Creating live chat features with Socket.IO