1
00:00:00,380 --> 00:00:05,190
OK we'll come back the next feature I want to tackle is the X button here.

2
00:00:05,190 --> 00:00:11,730
So when we click on this X it should actually remove the entire To do so not just grayed out but it

3
00:00:11,730 --> 00:00:14,060
should actually fade out and delete.

4
00:00:14,190 --> 00:00:16,530
So it looks like this on the final version.

5
00:00:16,710 --> 00:00:22,170
We don't have the same icon to click on in the same colors or the animation but the functionality when

6
00:00:22,170 --> 00:00:24,890
I do click on something should be the same.

7
00:00:24,930 --> 00:00:28,100
So let's say that I'm done with dishes.

8
00:00:28,440 --> 00:00:30,400
It fades out and then disappears.

9
00:00:30,450 --> 00:00:33,010
And it's no longer here it's completely gone.

10
00:00:33,320 --> 00:00:34,250
OK.

11
00:00:34,590 --> 00:00:39,350
The first thing that we want to do is listen for a click on any of these exes.

12
00:00:39,660 --> 00:00:45,460
And in our age Tim I'll remember that we made each one a span so that we can easily do that.

13
00:00:45,690 --> 00:00:51,780
Otherwise if we just had an X as part of the lie there's no way to determine if our click is on the

14
00:00:51,780 --> 00:00:54,140
X or if it's on the rest of the way.

15
00:00:54,150 --> 00:01:00,680
So we just been there and now we'll go to a javascript and let's add in another comment.

16
00:01:00,960 --> 00:01:08,330
Click on X to delete to do so we'll start with the click event.

17
00:01:08,760 --> 00:01:10,740
So dollar sign.

18
00:01:10,770 --> 00:01:20,880
Select all spand And will you click again and then we need a callback function and instead of our callback

19
00:01:20,940 --> 00:01:34,110
we'll just do another click on a span just like that and we'll go back refresh we click on the lie nothing

20
00:01:34,110 --> 00:01:35,200
happens.

21
00:01:35,340 --> 00:01:39,840
As soon as we click on the span we get an alert that says you clicked on this span.

22
00:01:39,840 --> 00:01:45,420
There is one small issue that you may not have noticed yet when I click on the span and then click on

23
00:01:45,420 --> 00:01:52,690
the X I get the alert that I expect to get but also pay close attention as I dismissed the alert.

24
00:01:53,190 --> 00:01:57,380
We also get the styles that are coming from the click event.

25
00:01:57,840 --> 00:02:04,680
So what that tells us is that the spam event is firing and then afterwards the ly click event is firing

26
00:02:04,680 --> 00:02:05,500
as well.

27
00:02:05,730 --> 00:02:11,480
And that does make sense because our spans are inside of the allies.

28
00:02:11,730 --> 00:02:17,130
So when we click on a span when I click on this span for instance in the middle let's inspect it

29
00:02:21,990 --> 00:02:25,680
I'm clicking on this span but that's Spanish also inside the ally.

30
00:02:25,830 --> 00:02:29,370
So from another perspective I'm clicking on the lie.

31
00:02:29,620 --> 00:02:36,660
But from another perspective I'm clicking on the well because all of these are instead of a UL or on

32
00:02:36,660 --> 00:02:46,320
the div ID container or on the body or on the team element that one click on this span is going through

33
00:02:46,350 --> 00:02:48,640
you know five or six different layers.

34
00:02:48,660 --> 00:02:53,880
So when we add in event listener to the span or to the ally or if we had an event listener and all of

35
00:02:53,880 --> 00:02:55,790
them which I'll show you right now.

36
00:02:55,920 --> 00:03:04,020
So let's add another event listener here and this one will be on the will and we'll just alert clicked

37
00:03:04,020 --> 00:03:07,990
on UIL and will do one more.

38
00:03:08,280 --> 00:03:16,080
And this one will be on the divx ID container and this will say click on container div and actually

39
00:03:16,230 --> 00:03:19,560
will do it on the body as well.

40
00:03:19,560 --> 00:03:22,510
And this will say click on the body.

41
00:03:22,740 --> 00:03:23,410
OK.

42
00:03:23,430 --> 00:03:28,880
So we click on the span which is instead of an ally instead of a UL instead of the container inside

43
00:03:28,890 --> 00:03:30,510
of the body.

44
00:03:30,510 --> 00:03:34,530
Now let's pay attention when we refresh to the order that things fire in.

45
00:03:34,590 --> 00:03:42,570
So first I click on the span and it tells me clicked on the span and then I don't know if you noticed

46
00:03:42,600 --> 00:03:47,090
but the click event fire does well that's how we got the styles there.

47
00:03:47,340 --> 00:03:53,060
And then the well click event then the container div and then the body finally.

48
00:03:53,340 --> 00:03:56,980
So that example illustrates a phenomenon called event bubbling.

49
00:03:57,030 --> 00:04:02,290
What happens is this event initially is triggered on the span and that's where it originates.

50
00:04:02,400 --> 00:04:05,130
But then it bubbles up in two parent elements.

51
00:04:05,130 --> 00:04:11,490
So it bubbles up into the lie and it will trigger any like click events and then from there it bubbles

52
00:04:11,490 --> 00:04:17,730
up to the can to the well which will trigger any well click event and so on until it hits the HTL element

53
00:04:17,880 --> 00:04:20,830
where it stops to prevent the lie.

54
00:04:20,850 --> 00:04:25,840
Click handler from triggering when we click on the span which is inside the Y.

55
00:04:25,860 --> 00:04:31,250
What we can do is actually tell the event inside of the span to not bubble anymore.

56
00:04:31,440 --> 00:04:36,920
Just to stop in its tracks and not trigger any other events on parent element.

57
00:04:37,050 --> 00:04:38,600
So I'll show you that here.

58
00:04:38,960 --> 00:04:44,220
All we need to do instead of this span quick listener we add in the event object.

59
00:04:44,220 --> 00:04:48,210
And again this can be called E event T.

60
00:04:48,420 --> 00:04:51,720
Any name that you want the most common is event or e.

61
00:04:51,900 --> 00:04:59,110
And then what we'll do is add in a method called event stop propagation.

62
00:04:59,790 --> 00:05:04,050
And this is a J coding method that will stop the event from bubbling up.

63
00:05:04,050 --> 00:05:09,960
So it will fire on the span but it won't continue onto the like listener or any of these that we have

64
00:05:09,960 --> 00:05:10,940
for that matter.

65
00:05:11,310 --> 00:05:13,620
So if we save and refresh.

66
00:05:14,090 --> 00:05:20,210
And now I click on a span I still get my clicked on the span and then it stops.

67
00:05:20,250 --> 00:05:25,740
We don't get any of those other listeners that we had set up firing another we have the span listener

68
00:05:25,800 --> 00:05:26,970
set up correctly.

69
00:05:27,060 --> 00:05:29,560
Let's fill it in with the correct code.

70
00:05:29,940 --> 00:05:35,490
What we needed to do is when we click on a span I'll go back to the browser when we click on one of

71
00:05:35,490 --> 00:05:36,170
these.

72
00:05:36,330 --> 00:05:44,460
We want to remove this lie so the lie that contains it may refresh.

73
00:05:44,850 --> 00:05:52,140
I click on this span it needs to remove this lie and to do that we can start from the span using dollar

74
00:05:52,140 --> 00:05:58,810
sign this and if we just do dollars on this remove or fade out but we'll start with remove.

75
00:05:59,790 --> 00:06:01,780
And we go back.

76
00:06:02,190 --> 00:06:05,220
All that happens is that the span goes away.

77
00:06:05,220 --> 00:06:08,020
We right now are removing the span.

78
00:06:08,130 --> 00:06:14,000
We need to remove the enclosing element and Shakeri gives us a really nice and easy way to do that.

79
00:06:14,040 --> 00:06:22,680
All we have to do is write this parents remove and that will actually give us the parent element as

80
00:06:22,680 --> 00:06:24,120
a query element.

81
00:06:24,120 --> 00:06:32,940
So this is a span that we clicked on parent gives us the lie remove will remove the entire ally.

82
00:06:33,120 --> 00:06:39,500
So now if I refresh you can see it disappears and refresh again.

83
00:06:39,500 --> 00:06:46,110
But if I click on the fly it just checks off the last improvement that we could make is rather than

84
00:06:46,110 --> 00:06:47,500
removing it immediately.

85
00:06:47,750 --> 00:06:48,770
It's faded out.

86
00:06:49,140 --> 00:06:59,510
So we'll do a dot fade out and start there go back refresh we click and it fades out.

87
00:07:00,090 --> 00:07:03,530
But remember just fitting it out doesn't actually remove it.

88
00:07:03,570 --> 00:07:09,570
It's still here if we inspect instead of our you well we still have three to do is just two of them

89
00:07:09,720 --> 00:07:10,810
have display none.

90
00:07:11,130 --> 00:07:12,660
And we don't want that to happen.

91
00:07:12,660 --> 00:07:15,470
Imagine that we had a thousand to lose that we had deleted.

92
00:07:15,720 --> 00:07:20,240
Well we don't want to slow things down by having a thousand hidden elements on our page.

93
00:07:20,250 --> 00:07:26,820
So what we'll do instead is use remove but remember it doesn't work just to do this.

94
00:07:26,820 --> 00:07:30,770
It will remove it but it won't wait for the fade out to finish.

95
00:07:30,900 --> 00:07:40,820
If we want to so quickly demonstrate that we click it starts to fade and then immediately after it removes

96
00:07:41,620 --> 00:07:49,170
if we want the fade out to finish all we need to do is make use of the callback we can pass into fadeout

97
00:07:49,500 --> 00:07:51,580
that will run afterwards.

98
00:07:51,690 --> 00:07:56,820
And let's give it a duration as well let's say five hundred milliseconds to start.

99
00:07:57,180 --> 00:08:00,680
And then when it's done we can't just call remove on its own.

100
00:08:00,720 --> 00:08:06,360
We need to call it on an element and the element we want it to call it on is the same one that we're

101
00:08:06,360 --> 00:08:09,320
filling out so we can use a dollar sign.

102
00:08:09,420 --> 00:08:18,940
This is important to note that this right here is not the same dollar sign this right here.

103
00:08:19,470 --> 00:08:24,330
So let's walk through that it's a little complicated when we click on a Spanish dollar sign.

104
00:08:24,330 --> 00:08:30,410
This refers to the element that was quick on the span but then we're doing parent.

105
00:08:30,600 --> 00:08:37,720
So now we're working with the lie that encloses that span and then we're doing fadeout on the fly.

106
00:08:37,800 --> 00:08:43,080
So instead of fade out this refers to the lie not the span.

107
00:08:43,590 --> 00:08:47,470
OK so we'll save and go back refresh.

108
00:08:47,730 --> 00:08:54,700
Now we get a nice fade out and if we inspect the UL we only have one life left.

109
00:08:55,110 --> 00:08:57,600
So it fades out and then removes.

110
00:08:57,810 --> 00:08:59,610
To summarize everything here.

111
00:08:59,610 --> 00:09:05,250
The first issue we ran into was that our events the click event on the span was actually firing the

112
00:09:05,250 --> 00:09:09,610
event on the fly as well after it fired the span of it.

113
00:09:10,110 --> 00:09:15,090
So to fix that we used event that stop propagation which stops it from bubbling up to other elements

114
00:09:15,090 --> 00:09:15,540
.

115
00:09:15,780 --> 00:09:22,530
And then we used that parent to retrieve the ally that is enclosing the span that was clicked on and

116
00:09:22,530 --> 00:09:23,750
then we faded it out.

117
00:09:23,940 --> 00:09:29,430
And then when the fade out is done we remove the entire lie in the next video we're going to tackle

118
00:09:29,430 --> 00:09:30,970
the new to do functionality