In the earlier lesson, we built out the ability to create an an array, a list of different commands
that we want to run, and then we have an option to execute all of the commands, moving the element
around the page.
So we also want to add in an option this time in order to remove some of those commands.
So if we set up a bunch of them and as we hover over them, we've got the mouse effects, we want to
be able to click on them and remove them from the list.
So removing them from the array as well as removing them from the visible area.
So let's add that in.
And we're going to do that where we added in the event listeners for the most objects onto the span
as we're creating it.
This is also a good place to add in the ability to handle clicks on that element.
And then if that element does get clicked, then what we want to do is we want to remove that element
out of the list.
So taking our array, we want to find where that current item is located within the fun list array so
we can use a method index of which will return the first index value of where the element is located
in the array, or it will return a negative one if the item is not present in the array.
So we're looking for this as we're still looking at the main element within the array and we're pushing
it in.
So we also have an option to remove it out.
So when it gets clicked, we're going to remove it out of that fun list array.
And that's what a fun list is global, because that way we can access that at any point next to that
we want to do is we want to splice that out.
So let's take that out and let's call it temp remove and from fun list.
So now that we've located that element, we've got an index value.
We can splice that and taking it out.
We can splice it at position of where the current index is and removing out one element.
So the way that Splice works is that we need to specify what index value we want to remove out from
the array and how many items we want to remove out from the array.
And in this case, we found the index value using an index of and will console log those values out
so that we can see so we can see the current value and then we'll do that one after.
So now when I go in here and if I click on these, you can see that we're returning back the index value
of where it's located in the array.
And when you list out the array, you can see that as well.
We'll make this bigger.
So when you list the fun list array, you can see that those are the right span's accordingly.
So this is the first one that we clicked and then this is the next one that we clicked.
So we do are we are getting back those index values.
And now if we apply splice, that's going to select that element from that index position and return
that element back to us.
So if we output what we're returning for, the temporary remove and we need to add some in, clear the
set, and when we click it, you see that we're getting the index value.
So I click the the second item.
So that's within the array because those start at a zero index value.
So that's zero.
That's one.
So it's returning it back the index value.
And then we also see that we removed it out with the splice.
So we've got that span that we've selected and we were moving it out of the array.
So now if I list out fun list, you can see that I've removed out that particular element.
So that one's gone out of the array.
So we removed it from the array.
And we also need to remove it from our parent.
And that's the my function list.
So just as we're adding them, we can also remove out elements so we can use remove a child from the
list and we can specify that it's this object that we're removing.
So now we're removing it from the array as well as we're removing it from the list visible list.
So now we can try that out where we can set up a bunch of commands, we can remove some of them and
then press enter and see it get executed.
And we only are running the commands that were left within the array and the rate is actually in sync
with what we've got in our current visible area in the my function list element on the page.
So go ahead and add in this functionality and come up next.
We'll do a quick code run through, as well as any debugging and testing of the application that we
want to still perform, though that's still all yet to come.