jQuery Tutorial - 56 - removeClass Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
with a video tutorial for the new bustin
in this tutorial we're going to be
looking at the remove class attribute in
jQuery now in the last video we looked
at the add class attribute however in
this example we're going to create
something slightly different and a bit
more fun to demonstrate the remove class
now add class and remove class can take
an unlimited amount of classes to be
removed or added so for example in the
last part we looked at adding a class
using add class and then we specified a
class name for example bold if you had
another class for example underlined you
could also supply this as well now when
you're using remove class you can do
exactly the same thing now we're not
going to be demonstrating multiple
classes in this tutorial however what we
are going to be doing is creating
something a bit more dynamic and we're
going to do that using the event the
event handler toggle so let's go ahead
and create a span and I'm gonna give
this an ID of some text and I'm just
gonna write this is some text okay so
now if we go over to our browser you can
see that we've got this is some text
what I want to happen is when we click
on this I want the text to be
highlighted or underlined it doesn't
really matter what we do but when we
click on it
I want a class to be added to it okay so
let's go over to class j/s where we have
our code in fact no let's first of all
go over to style dot CSS and create this
class so I'm going to create the cut of
the class highlight and inside I'm gonna
say background yellow so what this will
do is once I apply this class to the
text here it'll essentially highlight it
let's just demonstrate that now
and when we go over to our browser you
can see that the text has been
highlighted so we're going to use the
add class and the remove class
attributes in sequence using the toggle
event handler once we click on this span
and then that's going to highlight and
then unhighlight so some practical use
there as well as just being an example
okay so we've got our highlight class in
style dot CSS now let's go ahead and
create our toggle event handler so we
need to reference the some text span so
I'm just going to write some text and
then say dr. toggle now inside of here
we can specify two different functions
to be used in sequence with each other
so we can either create these inside of
this inside of these parentheses or we
can create functions outside and in
reference these inside for now just to
get the hang of things we'll create them
inside so I've created the function
outline or the define the function and I
have my block here the second parameter
we are creating another function and
we're just gonna pull these down so we
can work a bit easier okay so the first
thing I want to do is it for it to
actually highlight the text so we're
going to use an example as we used in
the previous tutorial but with bold but
we're actually going to apply the
highlight class to some text so dot add
class once we've referenced the text
here and inside of that we specify the
class itself so which is highlight we've
named the class highlight in our CSS
file now what I'm going to do is do
exactly the same thing again I'm going
to reference some text but this time I'm
going to remove the class and in there
specify the class I want to remove which
is highlight and like I said before you
can specify to add or remove multiple
classes so you could go ahead and
specify a bold or and underlined in here
or any class that you've created so now
what's going to happen is when we click
on the text it's going to toggle using
the toggle event handler and we're gonna
first of all going to add the class
highlight which will add this back
round yellow to that text as I showed
you earlier in the browser what we're
then gonna do is next time you press it
we're gonna actually remove this class
so we're essentially just selecting
something or highlighting something on a
page so we'll go ahead and refresh the
page when I click on this now you can
see that it highlights when I click on
it again you can see that the highlight
disappears now let's go ahead and add
some additional classes so I'm going to
say bold and in here I'm going to choose
font-weight:bold so now what I can do is
when I click on it I might want to also
add boldness to it so when i refresh
when I click on it you can see that it's
been highlighted and now it's bold now
what's going to happen here is because
we're only removing the highlight class
we are keeping the bold class added to
this text so when we click here you can
see that the text remains bold but the
highlight disappears so now we're stuck
with bold text so you can supply
additional classes that you want to add
or remove we can go ahead and remove
bold as well so now it will go bold and
highlighted and then back to normal so
add class and remove class take an
unlimited amount of classes that you can
add or remove to them and can obviously
be used for a large number of HTML
elements