Hello and welcome back this lesson, we're going to add the ability to remove the elements, so that
also includes the ones that are already existing on the page and I've added in a border using success
so that we can distinguish where the elements are located.
And you can see as you add new elements in there adding in and they're applying that styling to it as
well so we can see where the elements are located.
So what we want to do is add the ability whenever we're clicking them to remove them.
So the first thing that we want to do is add the click event to the existing elements.
So let's create a function in order to handle that.
As we run the DOM content loaded and just after we do the dropdown list, we can add the ability to
remove the elements.
So creating a function and we'll call it remove her element that listeners to each one of the elements
currently within the list.
And we've got the list of elements currently within the node, Lyster, so we can loop through those
and going through for each and we all need to add this and run this one time.
So we're running this on the initial set up and the launch of the Web page.
So looping through and we can use item just as we've done before.
So looping through each one of these and then we can select that item because of course, this represents
this represents each one of the elements.
And we can use add event listener to add an event on each one of those and adding in and events.
So whenever the element gets clicked that we want to remove it from the page.
And for now we'll just console log out this so it can be whatever the active element is.
And we need to run the function, of course.
So now whenever I click these, we're selecting that active element.
So the next part is to remove it from the list.
And the way that we can do this is we can select its parent and then simply select the element that
we're removing from that parent and the parent and the elements are all added in and sitting.
So all the elements are sitting within the parent and that parent is the main object we can use, remove
child method, and then we just need to specify the child that we want to remove.
So let's try that out.
And now when we click the elements, they disappear off the page and now there's no more elements available
on the page.
And because we've done an update, we need to also rebuild the dropdown list.
So now whenever we remove it, it's removing from the list as well.
So even if we have it selected, we have the option to remove it off of the list.
And the same thing whenever we add it into the list, it's adding and updating the list and we can update
that content.
But these new ones, they're not going to have the event listener attached yet because of the fact that
we don't have that event firing off.
So let's create a function in order to handle the removal of the element and we'll simply call to this
function.
So remove L..
And there really wasn't a whole lot of there instead of having that anonymous function.
So call to the remove element function.
And so this will do the same thing that we already have existing.
But it also gives us an option to add the event listener so we can add this event listener as we create
the new elements.
And so that will add them into these newly created elements which don't have the event listener attached
yet.
And these are dynamically being created.
So when we do add the element, so over here we're creating the element.
We just need to specify that within temp, we want to have that option to click them and remove the
element.
So let's try that.
It so added a new element, click it and you can remove it and again added in, click it and remove
it.
So now we've got the flexibility to add elements and remove elements, update elements.
So coming up next, we'll do a code review of all of the code that we've developed throughout the previous
lessons.
So that's still to come.
So go ahead and add this.
The ability to remove the elements using JavaScript.