jQuery and DOM

jQuery removeClass() Method

If a class name is mentioned as a parameter, then a particular class will be removed from the group of matched elements. If no class name is specified in the parameter, all classes will be removed.

In the above HTML code, we have styled the two paragraph elements with a blue color text. Using the jquery removeClass() method, we can simply remove those style by targeting the two css classes badClass. See it in action by running the code in live editor

jQuery toggleClass() Method

This method accepts one or more class names as a parameter. In which, if an element already has the class in matched element, then it will remove the element, or if an element doesn’t have the class then it simply adds the element to the DOM.

jQuery toggleClass() method will add or remove the toggle effect to the above HTML paragraphs. In the first time when you click on the button it will add green color to the paragraphs, if you click the button second time it will remove the green color and make it default black

The above jquery toggleClass() method will produce the following output

jQuery clone() Method

This method accepts one or more class names as a parameter. if an element already has a class in the matched element, then it will remove the elements, or if an element doesn’t have a class, then it simply adds that element to the DOM.

In the above HTML we have three div elements which are styled as square boxes. If you click on any square box, what will happen is, it will create a clone of the current HTML div element and then it will insert the cloned copy after that current element.

Other Advanced jQuery and DOM topics you might want to learn

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM