jQuery and DOM

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





jQuery removeClass() Method

jQuery removeClass() method is used to remove specific CSS class and it's styles from the set of matched elements.
Syntax
Note:

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.

Example
HTML
jQuery

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



Try It Now

jQuery toggleClass() Method

jQuery toggleClass() method is used to add or remove more than one specific class to the each element present in the set of matched elements.
Syntax

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 toggleClass() method
Try It Now

jQuery clone() Method

jQuery clone() method performs a deep copy of the selected element in the DOM tree. Meaning it copies the selected elements and creates a copy of it in the DOM tree.

Syntax

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.

Example
HTML

jQuery

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.

Output
jQuery clone() method
Try It Now



jQuery DOM Reference

Other Advanced jQuery and DOM topics you might want to learn

jQuery Basic DOM Methods

jQuery DOM Removal

jQuery DOM Insertion Inside

jQuery DOM Insertion Outside

jQuery DOM Insertion Around

Sources and Credits

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