1 00:00:02,350 --> 00:00:05,170 We're not restricted to get and post requests, 2 00:00:05,170 --> 00:00:10,240 there are more HTTP methods and it just depends on the API you're working, 3 00:00:10,240 --> 00:00:12,460 which kind of requests you can send 4 00:00:12,460 --> 00:00:18,460 and here this JSONPlaceholder dummy API also supports deleting a resource, 5 00:00:18,460 --> 00:00:25,800 again it's just a fake as it says here but we can send a delete request to this URL 6 00:00:25,810 --> 00:00:31,570 and now please note that this new URL is a little bit different, here it includes the ID of a concrete 7 00:00:31,570 --> 00:00:34,480 post to fake that we delete that post. 8 00:00:36,360 --> 00:00:39,770 Now if we have a look at our list, we do have a delete button on every post, 9 00:00:39,780 --> 00:00:46,650 now we just have to make sure that the ID which is part of every response is kind of mapped to its 10 00:00:46,710 --> 00:00:53,070 element so that we can then find out on which element we clicked the delete button to send the right delete 11 00:00:53,070 --> 00:00:58,050 request. For that in the place where we output all posts, here, 12 00:00:59,010 --> 00:01:04,530 when we render the post elements, I actually also want to add an ID property here. 13 00:01:04,890 --> 00:01:13,460 For that, I want to go to my post element there and then use query selector li to select the li element 14 00:01:13,460 --> 00:01:20,030 itself and set the ID on that to post.id, so that we have that ID assigned to every list item 15 00:01:20,060 --> 00:01:25,900 element. If I now reload this page and click fetch posts here and we go to the elements tab, you'll see 16 00:01:25,900 --> 00:01:30,450 every list item has its ID as an attribute added. 17 00:01:30,580 --> 00:01:36,520 Now we can use that to then make that delete button work, for that we should add a listener to the delete 18 00:01:36,550 --> 00:01:44,080 button and now we could add a listener to each delete button or we use event delegation, which we learned 19 00:01:44,080 --> 00:01:50,680 about in the events module, to only use one listener on the list and then find out which list item or 20 00:01:50,680 --> 00:01:58,790 which button in which list item was clicked. For that we need access to the overall list here, post list 21 00:01:59,420 --> 00:02:05,720 with document query selector unordered list because I only have one unordered list on this page and 22 00:02:05,720 --> 00:02:13,620 here on post list, we can add an event listener for a click and then accept the event object and do something. 23 00:02:13,640 --> 00:02:18,770 Now of course, I don't want to delete anything just because a click happened anywhere on that list, 24 00:02:18,830 --> 00:02:24,350 instead we now need to find out which item was clicked and if it was the button that was clicked there 25 00:02:24,440 --> 00:02:31,100 and not just anything else in the item. To check that, we can reach out to event.target, we can then 26 00:02:31,100 --> 00:02:33,980 have a look at the tag name property. 27 00:02:34,070 --> 00:02:38,560 Now if that is button, all uppercase, then I know I clicked on a button. 28 00:02:38,840 --> 00:02:45,290 Now let's first of all check if that works by logging clicked on button, like this and 29 00:02:45,290 --> 00:02:48,480 if I now save that, reload, fetch the post, 30 00:02:48,500 --> 00:02:52,530 if I click anywhere nothing happens, if I click on delete, we see clicked on button. 31 00:02:52,550 --> 00:02:56,300 Now we need to find out to which list item this belongs 32 00:02:56,300 --> 00:03:06,050 and for that we get the post.id by using event.target.closest to get the closest list item, 33 00:03:06,050 --> 00:03:07,400 we know we clicked on a button, 34 00:03:07,400 --> 00:03:09,780 now I'm interested in the closest list item 35 00:03:09,890 --> 00:03:12,730 and then on this list item, we have the ID. 36 00:03:12,770 --> 00:03:19,760 So now this should give us the ID of the post we clicked on or on which posts delete button we 37 00:03:19,760 --> 00:03:21,050 clicked on. 38 00:03:21,080 --> 00:03:26,900 So if we save that and reload, if I fetch posts and I click on delete, here I print one, here I print 39 00:03:26,900 --> 00:03:27,570 three, 40 00:03:27,590 --> 00:03:30,210 here I print five, so that seems to work. 41 00:03:30,500 --> 00:03:34,360 Now we can work on the actual delete request. For that, 42 00:03:34,370 --> 00:03:37,540 let's again send a HTTP request here, 43 00:03:37,820 --> 00:03:44,630 this time of type delete and for the URL, I'll now use back ticks because I want to inject something 44 00:03:44,630 --> 00:03:49,950 into the URL so to say. The general URL is the same as before, 45 00:03:49,970 --> 00:03:54,320 so we can copy that but then we need to add a new segment to the path, 46 00:03:54,500 --> 00:04:02,690 so a new slash and then dynamically injected the post.id so that we add this at the end of the path 47 00:04:02,840 --> 00:04:09,350 because that's what the API wants. The API wants that the ID is part of the URL, the ID of the 48 00:04:09,350 --> 00:04:17,420 post which should be fake deleted. Well and with that, we should be good, now a delete request should 49 00:04:17,420 --> 00:04:20,180 be sent when we click on delete. 50 00:04:20,180 --> 00:04:25,250 So if I click delete here and we check the network tab, we see here 51 00:04:25,450 --> 00:04:32,080 this request was sent, it's a delete request to this URL and that's all right. 52 00:04:32,080 --> 00:04:37,790 The API doesn't seem to reply back with anything, it doesn't say so on the guide here either and therefore, 53 00:04:37,840 --> 00:04:38,520 that's it. 54 00:04:38,530 --> 00:04:41,740 Now of course you could delete the element from the UI, 55 00:04:41,740 --> 00:04:43,800 that's something you absolutely can implement, 56 00:04:43,810 --> 00:04:50,110 it's not related to HttpRequests though and therefore I'll save the time here, not update the UI and 57 00:04:50,110 --> 00:04:54,460 instead move onto other nice things you can do with HttpRequests.