1
00:00:00,390 --> 00:00:06,180
In the earlier lesson, we built out the ability to create an an array, a list of different commands

2
00:00:06,180 --> 00:00:11,190
that we want to run, and then we have an option to execute all of the commands, moving the element

3
00:00:11,190 --> 00:00:12,140
around the page.

4
00:00:12,450 --> 00:00:17,870
So we also want to add in an option this time in order to remove some of those commands.

5
00:00:18,270 --> 00:00:23,610
So if we set up a bunch of them and as we hover over them, we've got the mouse effects, we want to

6
00:00:23,610 --> 00:00:26,150
be able to click on them and remove them from the list.

7
00:00:26,340 --> 00:00:31,170
So removing them from the array as well as removing them from the visible area.

8
00:00:31,590 --> 00:00:33,180
So let's add that in.

9
00:00:33,330 --> 00:00:39,360
And we're going to do that where we added in the event listeners for the most objects onto the span

10
00:00:39,360 --> 00:00:40,390
as we're creating it.

11
00:00:40,650 --> 00:00:46,490
This is also a good place to add in the ability to handle clicks on that element.

12
00:00:46,890 --> 00:00:52,230
And then if that element does get clicked, then what we want to do is we want to remove that element

13
00:00:52,230 --> 00:00:53,030
out of the list.

14
00:00:53,640 --> 00:01:03,240
So taking our array, we want to find where that current item is located within the fun list array so

15
00:01:03,240 --> 00:01:09,720
we can use a method index of which will return the first index value of where the element is located

16
00:01:09,720 --> 00:01:15,370
in the array, or it will return a negative one if the item is not present in the array.

17
00:01:15,810 --> 00:01:22,950
So we're looking for this as we're still looking at the main element within the array and we're pushing

18
00:01:22,950 --> 00:01:23,360
it in.

19
00:01:23,490 --> 00:01:26,270
So we also have an option to remove it out.

20
00:01:26,550 --> 00:01:30,180
So when it gets clicked, we're going to remove it out of that fun list array.

21
00:01:30,360 --> 00:01:35,880
And that's what a fun list is global, because that way we can access that at any point next to that

22
00:01:35,880 --> 00:01:38,900
we want to do is we want to splice that out.

23
00:01:39,330 --> 00:01:44,930
So let's take that out and let's call it temp remove and from fun list.

24
00:01:45,120 --> 00:01:50,100
So now that we've located that element, we've got an index value.

25
00:01:50,490 --> 00:01:53,760
We can splice that and taking it out.

26
00:01:54,090 --> 00:02:00,990
We can splice it at position of where the current index is and removing out one element.

27
00:02:01,200 --> 00:02:07,800
So the way that Splice works is that we need to specify what index value we want to remove out from

28
00:02:07,800 --> 00:02:11,760
the array and how many items we want to remove out from the array.

29
00:02:12,030 --> 00:02:18,870
And in this case, we found the index value using an index of and will console log those values out

30
00:02:19,260 --> 00:02:25,180
so that we can see so we can see the current value and then we'll do that one after.

31
00:02:25,290 --> 00:02:31,320
So now when I go in here and if I click on these, you can see that we're returning back the index value

32
00:02:31,320 --> 00:02:33,090
of where it's located in the array.

33
00:02:33,330 --> 00:02:36,480
And when you list out the array, you can see that as well.

34
00:02:36,600 --> 00:02:37,480
We'll make this bigger.

35
00:02:37,980 --> 00:02:44,550
So when you list the fun list array, you can see that those are the right span's accordingly.

36
00:02:44,580 --> 00:02:48,870
So this is the first one that we clicked and then this is the next one that we clicked.

37
00:02:49,170 --> 00:02:52,440
So we do are we are getting back those index values.

38
00:02:52,590 --> 00:02:59,460
And now if we apply splice, that's going to select that element from that index position and return

39
00:02:59,460 --> 00:03:01,090
that element back to us.

40
00:03:01,410 --> 00:03:09,300
So if we output what we're returning for, the temporary remove and we need to add some in, clear the

41
00:03:09,300 --> 00:03:13,140
set, and when we click it, you see that we're getting the index value.

42
00:03:13,150 --> 00:03:15,680
So I click the the second item.

43
00:03:15,690 --> 00:03:19,410
So that's within the array because those start at a zero index value.

44
00:03:19,560 --> 00:03:20,340
So that's zero.

45
00:03:20,340 --> 00:03:20,970
That's one.

46
00:03:20,970 --> 00:03:23,010
So it's returning it back the index value.

47
00:03:23,220 --> 00:03:27,330
And then we also see that we removed it out with the splice.

48
00:03:27,360 --> 00:03:32,130
So we've got that span that we've selected and we were moving it out of the array.

49
00:03:32,400 --> 00:03:39,780
So now if I list out fun list, you can see that I've removed out that particular element.

50
00:03:39,780 --> 00:03:41,850
So that one's gone out of the array.

51
00:03:42,120 --> 00:03:43,710
So we removed it from the array.

52
00:03:43,860 --> 00:03:48,030
And we also need to remove it from our parent.

53
00:03:48,300 --> 00:03:50,520
And that's the my function list.

54
00:03:50,820 --> 00:03:58,380
So just as we're adding them, we can also remove out elements so we can use remove a child from the

55
00:03:58,380 --> 00:04:03,540
list and we can specify that it's this object that we're removing.

56
00:04:04,020 --> 00:04:11,480
So now we're removing it from the array as well as we're removing it from the list visible list.

57
00:04:11,850 --> 00:04:17,730
So now we can try that out where we can set up a bunch of commands, we can remove some of them and

58
00:04:17,730 --> 00:04:20,190
then press enter and see it get executed.

59
00:04:20,310 --> 00:04:27,000
And we only are running the commands that were left within the array and the rate is actually in sync

60
00:04:27,000 --> 00:04:34,080
with what we've got in our current visible area in the my function list element on the page.

61
00:04:34,260 --> 00:04:37,410
So go ahead and add in this functionality and come up next.

62
00:04:37,410 --> 00:04:42,720
We'll do a quick code run through, as well as any debugging and testing of the application that we

63
00:04:42,720 --> 00:04:45,840
want to still perform, though that's still all yet to come.