1
00:00:00,000 --> 00:00:02,700
Okay, in this example, let's go ahead and remove

2
00:00:02,700 --> 00:00:05,600
the blue class and remove the width class.

3
00:00:05,595 --> 00:00:09,755
And so what I have here is an element with three classes on it,

4
00:00:09,750 --> 00:00:11,510
box blue and width 100%.

5
00:00:11,505 --> 00:00:14,975
This is just taking off from that last lesson where we were adding a class.

6
00:00:14,970 --> 00:00:19,370
And this is my box blue end with CSS that we have made here.

7
00:00:19,365 --> 00:00:24,525
So now what I want to do is register two different click events.

8
00:00:24,525 --> 00:00:26,025
When you click Remove blue,

9
00:00:26,025 --> 00:00:29,315
remove blue from here.

10
00:00:29,310 --> 00:00:30,540
And when you remove width,

11
00:00:30,540 --> 00:00:33,230
remove the width 100 class.

12
00:00:33,225 --> 00:00:36,695
And so we can get a little bit fancy with this.

13
00:00:36,690 --> 00:00:39,840
So instead of selecting box multiple times, we can select it once.

14
00:00:39,840 --> 00:00:43,420
So we can say const box is equal to,

15
00:00:43,415 --> 00:00:47,325
and we're just going to get the box itself as a class.

16
00:00:47,329 --> 00:00:49,939
And this is just a simple selector.

17
00:00:49,940 --> 00:00:52,040
We can also do const,

18
00:00:52,040 --> 00:00:58,810
remove blue is equal to remove blue that's going to select that button.

19
00:00:58,805 --> 00:01:04,385
And remove width is going to remove the width.

20
00:01:04,385 --> 00:01:06,475
And so these are just selector.

21
00:01:06,470 --> 00:01:09,850
So I've selected the box removed blue and remove width.

22
00:01:09,845 --> 00:01:13,465
Now here what I wanted to do is when you click Remove blue,

23
00:01:13,460 --> 00:01:16,220
select that box and remove this class.

24
00:01:16,220 --> 00:01:24,320
And we can do that quite easily. We can say Remove blue dot onclick,

25
00:01:24,320 --> 00:01:30,800
function, vox dot remove class.

26
00:01:30,800 --> 00:01:33,170
That's all it is, just the word remove class.

27
00:01:33,170 --> 00:01:35,320
And then we want to remove blue.

28
00:01:35,315 --> 00:01:37,145
It's go ahead and give this a shot.

29
00:01:37,145 --> 00:01:39,205
And when we remove blue.

30
00:01:39,200 --> 00:01:41,360
And as actually as,

31
00:01:41,360 --> 00:01:42,920
as a better example here,

32
00:01:42,920 --> 00:01:45,880
down here we've got a box blue width 100.

33
00:01:45,875 --> 00:01:49,045
We could do remove blue and it gets rid of it for us.

34
00:01:49,040 --> 00:01:52,120
Then we can click another button and remove the width.

35
00:01:52,115 --> 00:01:54,515
And so what I'm doing with these concepts here

36
00:01:54,515 --> 00:01:57,335
is instead of selecting box numerous times.

37
00:01:57,335 --> 00:02:04,205
So instead of having to select that and put it in there,

38
00:02:04,205 --> 00:02:08,635
I can select it just once because I really only need to select it once.

39
00:02:08,630 --> 00:02:12,470
And then in a second event listener we can do the exact same thing.

40
00:02:12,470 --> 00:02:18,810
So we can say Remove width, dot on click.

41
00:02:19,510 --> 00:02:23,000
And because we don't need the this keyword whatsoever,

42
00:02:22,999 --> 00:02:31,729
we can do an arrow function and we can say Box dot remove class width.

43
00:02:31,730 --> 00:02:33,730
And that's not going to be,

44
00:02:33,725 --> 00:02:35,365
it's going to be width 100.

45
00:02:35,360 --> 00:02:37,390
We want to remove this class.

46
00:02:37,385 --> 00:02:38,945
Let's go ahead and refresh.

47
00:02:38,945 --> 00:02:40,285
When we remove the width,

48
00:02:40,280 --> 00:02:41,800
this is going to be a perfect box.

49
00:02:41,795 --> 00:02:43,075
When we remove blue,

50
00:02:43,070 --> 00:02:44,770
it is now black.

51
00:02:44,765 --> 00:02:46,415
And so that's really all there is.

52
00:02:46,415 --> 00:02:51,035
The only thing we really need to take away from this particular lesson is removed clasp.

53
00:02:51,035 --> 00:02:52,615
So go ahead and give that a shot.

54
00:02:52,610 --> 00:02:55,580
Remove Class, remove a class,

55
00:02:55,580 --> 00:02:58,160
and just try to make it work for you.

56
00:02:58,160 --> 00:03:01,400
Should only take you about a minute or two and when you're ready,

57
00:03:01,400 --> 00:03:04,900
let's head on over to the next lesson where we actually toggle classes on and off,

58
00:03:04,895 --> 00:03:08,095
because right now we can't really easily detect if a class

59
00:03:08,090 --> 00:03:12,500
has a blue class or a width 100.

60
00:03:12,500 --> 00:03:16,330
We can't really detect if an element has those classes rather.

61
00:03:16,325 --> 00:03:23,135
So what we can do is we can toggle them on and off with a very simple jQuery feature.