You can add/remove single or multiple class to the element dynamically with the help of addClass(), removeClass() methods in JQuery.

Introduction

Sometimes it need to add or remove class to a element from code. JQuery addClass() and removeClass() methods can be used to add/remove one or multiple class to the element. In this article I will show how these methods can work for you.

addClass(ClassName)

The addClass() method adds one or more class names to the elements. This method does not remove any existing class attributes, but only adds class name to the class attribute.

$('#mydiv').addClass('classA')

It will add classA to all div elements available in your page.

$('#mydiv').addClass('classA classB')

Above line will add classA and classB to the div elements.

removeClass(ClassName)

The removeClass() method can remove one/more or all class names from the elements. Below line of code will remove classA from all div elements present in your HTML.

$('#mydiv').removeClass('classA')

If want to remove all classes from class attribute then don't pass any class name in removeClass() method.
$('div').removeClass()

You can also use these methods one after another as per your need. Please see the example below.

$('#mydiv').removeClass('classA').addClass('classB')

It will first remove classA from div element and then will add classB to the element.

$('#mydiv').removeClass().addClass('classA classB')

It will remove all classes from div element and then will add classA and classB to the element.

Hope it can help you. Please don't forget to like and rate the article. I will come up with such articles.