1 00:00:02,340 --> 00:00:07,710 Now to make sure that we can remove movies by clicking on them, we need to add a click listener, 2 00:00:07,740 --> 00:00:11,880 we need to add that click listener to our new movie element which we in the end 3 00:00:11,880 --> 00:00:14,940 add here right, so that's the first important step. 4 00:00:14,940 --> 00:00:21,780 So here when we do create that new movie element, we need to add an event listener in exactly that place. 5 00:00:23,090 --> 00:00:29,840 So before I append my new movie element here, I want to add an event listener, a click listener of course 6 00:00:30,170 --> 00:00:34,510 and that click listener should toggle or should trigger a function that deletes that movie. 7 00:00:34,640 --> 00:00:43,420 So I'll add this function here, delete movie, not element but movie in general and I'll name it handler though 8 00:00:43,420 --> 00:00:49,030 because I'll attach this to an event handler. So delete movie handler here 9 00:00:49,070 --> 00:00:56,890 added to this event listener and now inside of delete movie handler, we need to do something. Now 10 00:00:56,900 --> 00:01:03,560 the trickiest part here is to find out which element was clicked. Now that will be easier once we know 11 00:01:03,560 --> 00:01:08,930 a bit more about events and that they actually help us with finding out which element was clicked 12 00:01:08,930 --> 00:01:10,430 but we don't know this yet. 13 00:01:10,430 --> 00:01:16,910 For now, we can help ourselves here by binding a value here, you learned about bind, 14 00:01:16,910 --> 00:01:24,540 this allows us to reconfigure arguments that are received by the to be executed function here and here, 15 00:01:24,810 --> 00:01:29,380 you can pass in null as a value for this thing which doesn't matter to us 16 00:01:29,610 --> 00:01:33,690 and now we need some unique identifier for that movie that's created. 17 00:01:33,690 --> 00:01:38,820 Now we don't have that yet so let's actually expect a new argument here, maybe the first argument which 18 00:01:38,820 --> 00:01:43,370 should be some ID which we can bind here. Now of course currently we don't get that, 19 00:01:43,400 --> 00:01:49,320 so let's go to the place where a new movie is created in memory here and there, let's make sure we also 20 00:01:49,320 --> 00:01:51,060 create an ID for every movie. 21 00:01:51,060 --> 00:01:58,320 So here I'll add an ID property to the new movie object and one ID we could generate here is math.random 22 00:01:58,590 --> 00:02:04,290 and then call to string on that to convert it to a string which is not necessarily required but 23 00:02:04,290 --> 00:02:06,350 I just want to have a string ID here. 24 00:02:06,360 --> 00:02:09,670 Now of course a random number is not really a unique ID, 25 00:02:09,690 --> 00:02:15,870 you can generate the exact same number twice but for this demo, it will certainly do and it's very unlikely 26 00:02:15,870 --> 00:02:19,060 that in this demo here, we end up with the same ID 27 00:02:19,070 --> 00:02:21,750 more than once. 28 00:02:21,780 --> 00:02:24,670 So now we can use that and pass it on here, 29 00:02:24,720 --> 00:02:32,540 new movie.id and now since we pass this on to render new movie element and then we in the end bind 30 00:02:32,540 --> 00:02:33,300 this to the delete 31 00:02:33,300 --> 00:02:40,110 movie handler, we get this ID as an argument, movie ID here in the delete movie handler and now that 32 00:02:40,110 --> 00:02:41,730 we get the movie ID here, 33 00:02:41,730 --> 00:02:44,970 the question is, what can we do with it in this place? 34 00:02:44,970 --> 00:02:50,970 Well, we can use it to find that movie with that ID in the movies array and the index the movie 35 00:02:50,970 --> 00:02:56,070 has in the movies array should be the index the movie in the end has, the movie element in the end has 36 00:02:56,340 --> 00:03:02,310 in this list root because we add elements in the same order to our movies array as we add them here 37 00:03:02,520 --> 00:03:03,920 in our list in the DOM. 38 00:03:03,920 --> 00:03:06,310 So the order in the indices should be the same 39 00:03:06,390 --> 00:03:11,250 and therefore if we find out the index of the movie here in the movies array, that should also be the 40 00:03:11,250 --> 00:03:11,640 index 41 00:03:11,640 --> 00:03:20,470 we need to remove or where we need to remove an item in our list here in the DOM. Now to find the index 42 00:03:20,650 --> 00:03:21,970 of the movie with that ID 43 00:03:21,970 --> 00:03:27,390 here in movies, we will learn about more elegant solutions in the upcoming array section, 44 00:03:27,520 --> 00:03:34,570 for now, with the tools we know at this point we can use a for loop and go through all movie elements 45 00:03:34,570 --> 00:03:43,210 here in the movies array, the normal for/of loop and then check if movie.id is equal to the movie 46 00:03:43,210 --> 00:03:50,090 ID we're getting here and if that is equal, we know that's the movie we're looking for, 47 00:03:50,090 --> 00:03:51,700 that's the ID we need. 48 00:03:51,740 --> 00:04:01,190 So here I'll add a new variable, identified index and this starts at 0 49 00:04:04,220 --> 00:04:07,660 or this movie index but shorter 50 00:04:07,880 --> 00:04:17,660 and then we add one here at the end of each iteration and here if we got the right ID, we just break, 51 00:04:17,670 --> 00:04:23,550 so we stop the nearest loop which is this loop, which means we exit out of the loop and the movie index 52 00:04:23,550 --> 00:04:30,570 we have is clearly the index of the movie we need. By the way, using a for loop, a regular for loop instead 53 00:04:30,570 --> 00:04:34,650 of for/of would have been an alternative of course for that but since I also want to be able to use 54 00:04:34,650 --> 00:04:39,570 the movie index once the loop is finished, I go for this approach and therefore now, we know which 55 00:04:39,570 --> 00:04:47,640 movie index is the right index for that ID, now we can use that to remove an element from our list 56 00:04:47,790 --> 00:04:49,150 of movies. 57 00:04:49,230 --> 00:04:54,930 So first of all, I want to remove it from my array here in Javascript which of course is not reflected 58 00:04:54,930 --> 00:04:57,960 in the DOM but still, this needs to go updated as well 59 00:04:57,960 --> 00:05:02,020 and to remove an item from there, we can use a method which is available on arrays, 60 00:05:02,040 --> 00:05:03,560 the splice method. 61 00:05:03,750 --> 00:05:10,530 This takes an index as an input, movie index and then the number of items you want to remove and it will 62 00:05:10,530 --> 00:05:11,250 just do that, 63 00:05:11,280 --> 00:05:18,150 it will manipulate that array by removing that element at that index and items after that element will 64 00:05:18,150 --> 00:05:21,370 simply move forward by one place. 65 00:05:21,390 --> 00:05:27,380 So the next item in line, the next element in this array will get that index of the item we just deleted. 66 00:05:27,390 --> 00:05:29,130 So that's just a Javascript code of course, 67 00:05:29,130 --> 00:05:34,950 we also need to update our DOM and for that again, I need the list root 68 00:05:34,950 --> 00:05:41,130 so I guess we could have set it up as a global constant but since we only use it in two places, duplicating 69 00:05:41,130 --> 00:05:42,390 it here should also be fine 70 00:05:42,390 --> 00:05:46,260 but also feel free of course to move this to a global level 71 00:05:46,320 --> 00:05:49,440 so that you only set the list with constant ones there. 72 00:05:49,560 --> 00:05:54,780 I will again go for another local constant here in this delete movie handler and now in this list 73 00:05:54,780 --> 00:06:04,660 root, we need to remove the element at that index, so we can reach out to list root children to get all 74 00:06:04,660 --> 00:06:06,590 the child elements 75 00:06:06,800 --> 00:06:14,670 and then of course select the item with movie index, that should be the movie we want to delete. Now there 76 00:06:14,670 --> 00:06:22,840 we can call remove as you learned or the backwards compatible solution would be to use list root, 77 00:06:23,040 --> 00:06:31,600 remove child and then go for list root and then select that child with that logic here. 78 00:06:31,620 --> 00:06:32,840 So both should work, 79 00:06:32,850 --> 00:06:39,640 let's first of all give that more modern approach a try here and since delete movie handler has been 80 00:06:39,640 --> 00:06:44,050 connected to the event listener, that should actually in theory at least all work. 81 00:06:44,050 --> 00:06:53,560 So if we reload here and I give this a try and enter Javascript The Complete Guide here, take that image 82 00:06:53,560 --> 00:07:00,190 which I used before and then quickly add another entry here, more, same image but of course different 83 00:07:00,190 --> 00:07:04,750 texts so we'll be able to tell if the right one was deleted and another 84 00:07:07,740 --> 00:07:08,430 like this 85 00:07:08,480 --> 00:07:11,220 and now let's click on more and this looks good. 86 00:07:11,220 --> 00:07:12,170 It's deleted here 87 00:07:13,290 --> 00:07:14,610 and the other two are still there. 88 00:07:14,610 --> 00:07:20,820 If I click on Javascript, this is deleted, if I add a new one so that the array is printed again in Javascript, 89 00:07:20,830 --> 00:07:23,350 we see this only has two elements 90 00:07:23,360 --> 00:07:24,390 and yes, 91 00:07:24,420 --> 00:07:28,470 that's another with a rating of 2 and here, this one with a rating of 3. 92 00:07:28,470 --> 00:07:34,340 So the right elements were deleted here in the DOM and also in the Javascript array, 93 00:07:34,350 --> 00:07:40,930 now let's also try that other approach which is more verbose but also works on older browsers. 94 00:07:41,130 --> 00:07:45,470 If we now reload here and give this a try, 95 00:07:45,500 --> 00:07:46,490 Javascript 96 00:07:49,000 --> 00:07:59,690 The Complete Guide with this image added here and add this, click on this here maybe, 97 00:07:59,840 --> 00:08:05,000 yes that also works. Now I'll go for the shorter approach but either of the two is fine and this now also 98 00:08:05,000 --> 00:08:06,790 deletes elements. 99 00:08:06,830 --> 00:08:11,280 Now one important note by the way about this event listener, when a movie is deleted, 100 00:08:11,300 --> 00:08:16,460 that of course means that this event listener goes into the void and is redundant because the element is 101 00:08:16,460 --> 00:08:17,600 redundant. 102 00:08:17,600 --> 00:08:19,460 Does this create a memory leak? 103 00:08:19,460 --> 00:08:20,570 The answer is no. 104 00:08:20,780 --> 00:08:26,810 If you delete an object from the DOM and you have no reference to that object in your code anymore which 105 00:08:26,810 --> 00:08:33,530 we don't have, then Javascript or the browser will automatically clear everything that is related to 106 00:08:33,530 --> 00:08:36,530 that DOM object including any event listeners, 107 00:08:36,530 --> 00:08:39,750 so it will clear the event listeners for you automatically. 108 00:08:39,950 --> 00:08:44,750 And the only references we have to that new movie element are here in this function, 109 00:08:44,750 --> 00:08:46,620 this constant, new movie element, 110 00:08:46,670 --> 00:08:50,510 this points at this list item which holds that event listener. 111 00:08:50,510 --> 00:08:57,560 Now once the function execution is done, that means that this constant is not used anymore and Javascript 112 00:08:57,560 --> 00:09:01,890 detects this and therefore treats this object here, 113 00:09:01,910 --> 00:09:03,790 the list item here as on reference. 114 00:09:03,800 --> 00:09:07,670 So when we then delete it in the DOM, it will be able to clear the event listener, 115 00:09:07,670 --> 00:09:10,190 that's just a side note so that you don't worry about that.