Harness the power of the jQuery removeClass Method

jqueryCombine the simplicity of jQuery with the rich formatting capabilities of CSS, and you can make web pages perform amazing tricks. For example, if you assign a CSS class to a DOM element, jQuery can remove that class instantly. That may not seem like an amazing trick until you learn how to remove classes from dozens, hundreds or thousands of elements using a single line of code.

Need excellent beginner jQuery tips?  Find them at Udemy.

Create a Simple removeClass Test Page

Suppose you have an HTML document that contains the following CSS class:

.blueParagraph

{

color:blue;

}

This class named blueParagraph has a color attribute whose value is blue.

Now, let’s assume that the body statement of your HTML document contains the following code:

<p class=‘blueParagraph’>Here is paragraph 1.</p>

<p class=‘blueParagraph’>Here is paragraph 2.</p>

<button id=‘button1’>Remove blueParagraph Class</button>

When you view the document in your browser, you’ll see two blue paragraphs and a ‘Remove blueParagraph Class’ button below them. That button’s id is ‘button1.’ Adding an id attribute to an element makes it easier for you to reference it. The paragraphs are blue because you assign the blueParagraph class to each paragraph.

Invoke the jQuery removeClass Method

The button doesn’t do anything yet, so clicking it causes no action. Make it useful by adding the code shown below to the document’s head section:

$(document).ready(function(){

// Add your code here

});

This block of code defines the ready function that runs when a document loads. There are shorter ways of writing this, but this longer version ensures that people who may not know much about jQuery can understand what’s going on. Want to know more about jQuery Functions? Udemy explains how they work. If your page needs to initialize event handlers, the ready function is an ideal place to put them, as shown in the following example:

$(document).ready(function(){

$(‘#button1’).click(function(){

// Add button click code here

});

});

In this example, you’ve replaced ‘Add your code here’ with an anonymous function that adds a click event to your button. This anonymous function has no code in it yet. Instead, it has a comment that reads, ‘Add button click code here.’ The following code shows how we can call the removeClass method in the click function:

$(document).ready(function(){

$(‘#button1’).click(function(){

$(‘p’).removeClass(‘blueParagraph’);

});

});

The removeClass method accepts the name of the class you wish to remove. In this example, that class’s name is ‘blueParagraph.’ The letter ‘p’ at the beginning of the statement tells jQuery the name of the element you wish to remove.

You’re now ready to test the modified code. Launch a browser and open your HTML document. As it loads, the code within the ready function executes and initializes the button’s click event handler.

When the page finishes loading, you’ll still see a ‘Remove blueParagraph Class’ button that sits below two blue paragraphs. Click that button and the removeClass method removes the blueParagraph class from all the document’s paragraph. When that happens, the paragraphs return to their default color.

Remove and Add Multiple Classes using removeClass

These code examples show how easy it is to harness the power of the removeClass method. The class is simple because it only sets an element’s color. In a real world application, your class may contain a variety of CSS attributes that change an element’s font, location, size and other characteristics.

Suppose you want to remove several classes from one or more DOM elements? You can do that by passing a string to the removeClass function, as shown below:

$(‘p’).removeClass( ‘class1 class 2’ )

This statement removes class1 and class2 from all paragraphs. Ensure that you place a space between each class name.

You can replace ‘p’ with the name of any DOM element you like. For example, if you assign a class named ‘yellowBackground’ to div elements in a document, you can remove that class from all divs using the following statement:

$(‘div’).removeClass(‘yellowBackground’);

Suppose you want to add a class to one or more elements? The addClass method shown in the following example performs that task:

$(‘div’).addClass(‘pinkBackground’);

When this statement runs, jQuery adds a class named pinkBackground to all div elements. If you’d like to remove one class and replace it with another, you can call removeClass and addClass using one statement, as seen in the following statement:

$(‘div’).removeClass(‘yellowBackground’ ).addClass( ‘pinkBackground’ );

This statement causes the background color of all divs to change from yellow to pink if your document has a pinkBackground class that has a background-color attribute whose value is pink. It would take a lot more statements to make this happen if you coded it using JavaScript. JQuery’s built-in removeClass and addClass methods help you perform complex CSS tricks using one line of code.

Target Specific Elements with the removeClass Method

While there may be times when you want to remove classes from all elements of a specific type, you may also want to remove classes from specific elements. For example, let’s assume that your HTML document contains 100 divs that reference a yellowBackground class. Also assume that you only want to remove that class from one of your divs. You can do that by giving the div a unique id value when you define it in the document’s body section, as shown below:

<div class=‘yellowBackground’ id=‘div1’>This div has an id</div>

You can then call the following removeClass method to remove the class from that div:

$(‘#div1’).removeClass(‘yellowBackground’);

This statement is different from the previous example because you replace ‘div’ with the id of the div that references the class you want to remove. In this example, that div’s id value is ‘div1.’ When you place a ‘#’ sign in front of that name, jQuery knows to remove the class from the element that has the id you specify. Need to brush up on jQuery syntax? Learn the basics now.

Important Things to Remember

This example shows how to add a button click event handler to your HTML document. You don’t need to do that unless you want an event to execute the removeClass method. You can call the removeClass method any time you like. For instance, you might like to remove a class after one of your functions finishes executing a task. You could remove the class by simply calling the removeClass method as shown in these examples.

Because you can add classes to images, links and all types of DOM elements, you can use the jQuery removeClass method to make those elements interactive and dynamic.