1
00:00:00,330 --> 00:00:05,490
Hello and welcome back this lesson, we're going to add the ability to remove the elements, so that

2
00:00:05,490 --> 00:00:11,820
also includes the ones that are already existing on the page and I've added in a border using success

3
00:00:12,000 --> 00:00:14,670
so that we can distinguish where the elements are located.

4
00:00:14,820 --> 00:00:21,060
And you can see as you add new elements in there adding in and they're applying that styling to it as

5
00:00:21,060 --> 00:00:23,890
well so we can see where the elements are located.

6
00:00:24,180 --> 00:00:29,420
So what we want to do is add the ability whenever we're clicking them to remove them.

7
00:00:29,610 --> 00:00:33,990
So the first thing that we want to do is add the click event to the existing elements.

8
00:00:34,380 --> 00:00:36,750
So let's create a function in order to handle that.

9
00:00:37,170 --> 00:00:43,800
As we run the DOM content loaded and just after we do the dropdown list, we can add the ability to

10
00:00:43,800 --> 00:00:44,900
remove the elements.

11
00:00:45,180 --> 00:00:50,880
So creating a function and we'll call it remove her element that listeners to each one of the elements

12
00:00:50,880 --> 00:00:52,620
currently within the list.

13
00:00:52,890 --> 00:00:59,100
And we've got the list of elements currently within the node, Lyster, so we can loop through those

14
00:00:59,430 --> 00:01:04,890
and going through for each and we all need to add this and run this one time.

15
00:01:05,070 --> 00:01:11,190
So we're running this on the initial set up and the launch of the Web page.

16
00:01:11,940 --> 00:01:15,570
So looping through and we can use item just as we've done before.

17
00:01:16,050 --> 00:01:21,960
So looping through each one of these and then we can select that item because of course, this represents

18
00:01:22,290 --> 00:01:24,300
this represents each one of the elements.

19
00:01:24,300 --> 00:01:32,460
And we can use add event listener to add an event on each one of those and adding in and events.

20
00:01:33,240 --> 00:01:37,940
So whenever the element gets clicked that we want to remove it from the page.

21
00:01:38,430 --> 00:01:44,250
And for now we'll just console log out this so it can be whatever the active element is.

22
00:01:44,250 --> 00:01:46,030
And we need to run the function, of course.

23
00:01:46,830 --> 00:01:50,540
So now whenever I click these, we're selecting that active element.

24
00:01:50,820 --> 00:01:54,120
So the next part is to remove it from the list.

25
00:01:54,390 --> 00:02:00,090
And the way that we can do this is we can select its parent and then simply select the element that

26
00:02:00,090 --> 00:02:06,600
we're removing from that parent and the parent and the elements are all added in and sitting.

27
00:02:06,870 --> 00:02:15,060
So all the elements are sitting within the parent and that parent is the main object we can use, remove

28
00:02:15,060 --> 00:02:19,960
child method, and then we just need to specify the child that we want to remove.

29
00:02:20,340 --> 00:02:21,450
So let's try that out.

30
00:02:21,450 --> 00:02:27,390
And now when we click the elements, they disappear off the page and now there's no more elements available

31
00:02:27,390 --> 00:02:28,050
on the page.

32
00:02:28,230 --> 00:02:34,580
And because we've done an update, we need to also rebuild the dropdown list.

33
00:02:35,040 --> 00:02:39,170
So now whenever we remove it, it's removing from the list as well.

34
00:02:39,870 --> 00:02:44,400
So even if we have it selected, we have the option to remove it off of the list.

35
00:02:45,030 --> 00:02:50,490
And the same thing whenever we add it into the list, it's adding and updating the list and we can update

36
00:02:50,490 --> 00:02:51,270
that content.

37
00:02:51,510 --> 00:02:56,700
But these new ones, they're not going to have the event listener attached yet because of the fact that

38
00:02:56,910 --> 00:02:59,610
we don't have that event firing off.

39
00:03:00,210 --> 00:03:06,420
So let's create a function in order to handle the removal of the element and we'll simply call to this

40
00:03:06,420 --> 00:03:06,950
function.

41
00:03:06,990 --> 00:03:08,100
So remove L..

42
00:03:08,700 --> 00:03:12,960
And there really wasn't a whole lot of there instead of having that anonymous function.

43
00:03:13,110 --> 00:03:15,450
So call to the remove element function.

44
00:03:15,720 --> 00:03:18,960
And so this will do the same thing that we already have existing.

45
00:03:18,960 --> 00:03:25,350
But it also gives us an option to add the event listener so we can add this event listener as we create

46
00:03:25,380 --> 00:03:26,460
the new elements.

47
00:03:26,700 --> 00:03:31,800
And so that will add them into these newly created elements which don't have the event listener attached

48
00:03:31,800 --> 00:03:32,040
yet.

49
00:03:32,250 --> 00:03:34,770
And these are dynamically being created.

50
00:03:34,980 --> 00:03:39,330
So when we do add the element, so over here we're creating the element.

51
00:03:39,720 --> 00:03:45,660
We just need to specify that within temp, we want to have that option to click them and remove the

52
00:03:45,660 --> 00:03:46,020
element.

53
00:03:46,040 --> 00:03:46,740
So let's try that.

54
00:03:46,740 --> 00:03:53,520
It so added a new element, click it and you can remove it and again added in, click it and remove

55
00:03:53,520 --> 00:03:53,680
it.

56
00:03:54,030 --> 00:03:59,820
So now we've got the flexibility to add elements and remove elements, update elements.

57
00:04:00,390 --> 00:04:05,610
So coming up next, we'll do a code review of all of the code that we've developed throughout the previous

58
00:04:05,610 --> 00:04:06,150
lessons.

59
00:04:06,150 --> 00:04:06,970
So that's still to come.

60
00:04:07,290 --> 00:04:08,550
So go ahead and add this.

61
00:04:08,940 --> 00:04:12,690
The ability to remove the elements using JavaScript.