Now to make sure that we can remove movies by clicking on them, we need to add a click listener,
we need to add that click listener to our new movie element which we in the end
add here right, so that's the first important step.
So here when we do create that new movie element, we need to add an event listener in exactly that place.
So before I append my new movie element here, I want to add an event listener, a click listener of course
and that click listener should toggle or should trigger a function that deletes that movie.
So I'll add this function here, delete movie, not element but movie in general and I'll name it handler though
because I'll attach this to an event handler. So delete movie handler here
added to this event listener and now inside of delete movie handler, we need to do something. Now
the trickiest part here is to find out which element was clicked. Now that will be easier once we know
a bit more about events and that they actually help us with finding out which element was clicked
but we don't know this yet.
For now, we can help ourselves here by binding a value here, you learned about bind,
this allows us to reconfigure arguments that are received by the to be executed function here and here,
you can pass in null as a value for this thing which doesn't matter to us
and now we need some unique identifier for that movie that's created.
Now we don't have that yet so let's actually expect a new argument here, maybe the first argument which
should be some ID which we can bind here. Now of course currently we don't get that,
so let's go to the place where a new movie is created in memory here and there, let's make sure we also
create an ID for every movie.
So here I'll add an ID property to the new movie object and one ID we could generate here is math.random
and then call to string on that to convert it to a string which is not necessarily required but
I just want to have a string ID here.
Now of course a random number is not really a unique ID,
you can generate the exact same number twice but for this demo, it will certainly do and it's very unlikely
that in this demo here, we end up with the same ID
more than once.
So now we can use that and pass it on here,
new movie.id and now since we pass this on to render new movie element and then we in the end bind
this to the delete
movie handler, we get this ID as an argument, movie ID here in the delete movie handler and now that
we get the movie ID here,
the question is, what can we do with it in this place?
Well, we can use it to find that movie with that ID in the movies array and the index the movie
has in the movies array should be the index the movie in the end has, the movie element in the end has
in this list root because we add elements in the same order to our movies array as we add them here
in our list in the DOM.
So the order in the indices should be the same
and therefore if we find out the index of the movie here in the movies array, that should also be the
index
we need to remove or where we need to remove an item in our list here in the DOM. Now to find the index
of the movie with that ID
here in movies, we will learn about more elegant solutions in the upcoming array section,
for now, with the tools we know at this point we can use a for loop and go through all movie elements
here in the movies array, the normal for/of loop and then check if movie.id is equal to the movie
ID we're getting here and if that is equal, we know that's the movie we're looking for,
that's the ID we need.
So here I'll add a new variable, identified index and this starts at 0
or this movie index but shorter
and then we add one here at the end of each iteration and here if we got the right ID, we just break,
so we stop the nearest loop which is this loop, which means we exit out of the loop and the movie index
we have is clearly the index of the movie we need. By the way, using a for loop, a regular for loop instead
of for/of would have been an alternative of course for that but since I also want to be able to use
the movie index once the loop is finished, I go for this approach and therefore now, we know which
movie index is the right index for that ID, now we can use that to remove an element from our list
of movies.
So first of all, I want to remove it from my array here in Javascript which of course is not reflected
in the DOM but still, this needs to go updated as well
and to remove an item from there, we can use a method which is available on arrays,
the splice method.
This takes an index as an input, movie index and then the number of items you want to remove and it will
just do that,
it will manipulate that array by removing that element at that index and items after that element will
simply move forward by one place.
So the next item in line, the next element in this array will get that index of the item we just deleted.
So that's just a Javascript code of course,
we also need to update our DOM and for that again, I need the list root
so I guess we could have set it up as a global constant but since we only use it in two places, duplicating
it here should also be fine
but also feel free of course to move this to a global level
so that you only set the list with constant ones there.
I will again go for another local constant here in this delete movie handler and now in this list
root, we need to remove the element at that index, so we can reach out to list root children to get all
the child elements
and then of course select the item with movie index, that should be the movie we want to delete. Now there
we can call remove as you learned or the backwards compatible solution would be to use list root,
remove child and then go for list root and then select that child with that logic here.
So both should work,
let's first of all give that more modern approach a try here and since delete movie handler has been
connected to the event listener, that should actually in theory at least all work.
So if we reload here and I give this a try and enter Javascript The Complete Guide here, take that image
which I used before and then quickly add another entry here, more, same image but of course different
texts so we'll be able to tell if the right one was deleted and another
like this
and now let's click on more and this looks good.
It's deleted here
and the other two are still there.
If I click on Javascript, this is deleted, if I add a new one so that the array is printed again in Javascript,
we see this only has two elements
and yes,
that's another with a rating of 2 and here, this one with a rating of 3.
So the right elements were deleted here in the DOM and also in the Javascript array,
now let's also try that other approach which is more verbose but also works on older browsers.
If we now reload here and give this a try,
Javascript
The Complete Guide with this image added here and add this, click on this here maybe,
yes that also works. Now I'll go for the shorter approach but either of the two is fine and this now also
deletes elements.
Now one important note by the way about this event listener, when a movie is deleted,
that of course means that this event listener goes into the void and is redundant because the element is
redundant.
Does this create a memory leak?
The answer is no.
If you delete an object from the DOM and you have no reference to that object in your code anymore which
we don't have, then Javascript or the browser will automatically clear everything that is related to
that DOM object including any event listeners,
so it will clear the event listeners for you automatically.
And the only references we have to that new movie element are here in this function,
this constant, new movie element,
this points at this list item which holds that event listener.
Now once the function execution is done, that means that this constant is not used anymore and Javascript
detects this and therefore treats this object here,
the list item here as on reference.
So when we then delete it in the DOM, it will be able to clear the event listener,
that's just a side note so that you don't worry about that.