Okay, in this example, let's go ahead and remove
the blue class and remove the width class.
And so what I have here is an element with three classes on it,
box blue and width 100%.
This is just taking off from that last lesson where we were adding a class.
And this is my box blue end with CSS that we have made here.
So now what I want to do is register two different click events.
When you click Remove blue,
remove blue from here.
And when you remove width,
remove the width 100 class.
And so we can get a little bit fancy with this.
So instead of selecting box multiple times, we can select it once.
So we can say const box is equal to,
and we're just going to get the box itself as a class.
And this is just a simple selector.
We can also do const,
remove blue is equal to remove blue that's going to select that button.
And remove width is going to remove the width.
And so these are just selector.
So I've selected the box removed blue and remove width.
Now here what I wanted to do is when you click Remove blue,
select that box and remove this class.
And we can do that quite easily. We can say Remove blue dot onclick,
function, vox dot remove class.
That's all it is, just the word remove class.
And then we want to remove blue.
It's go ahead and give this a shot.
And when we remove blue.
And as actually as,
as a better example here,
down here we've got a box blue width 100.
We could do remove blue and it gets rid of it for us.
Then we can click another button and remove the width.
And so what I'm doing with these concepts here
is instead of selecting box numerous times.
So instead of having to select that and put it in there,
I can select it just once because I really only need to select it once.
And then in a second event listener we can do the exact same thing.
So we can say Remove width, dot on click.
And because we don't need the this keyword whatsoever,
we can do an arrow function and we can say Box dot remove class width.
And that's not going to be,
it's going to be width 100.
We want to remove this class.
Let's go ahead and refresh.
When we remove the width,
this is going to be a perfect box.
When we remove blue,
it is now black.
And so that's really all there is.
The only thing we really need to take away from this particular lesson is removed clasp.
So go ahead and give that a shot.
Remove Class, remove a class,
and just try to make it work for you.
Should only take you about a minute or two and when you're ready,
let's head on over to the next lesson where we actually toggle classes on and off,
because right now we can't really easily detect if a class
has a blue class or a width 100.
We can't really detect if an element has those classes rather.
So what we can do is we can toggle them on and off with a very simple jQuery feature.