Introduction:
The Document Object Model (DOM) represents a fundamental concept in both HTML and XML. DOM manipulation is commonly employed in HTML for various purposes. Through DOM manipulation, it is possible to insert or delete HTML elements. JavaScript enables us to modify properties, classes, and IDs associated with HTML elements. Additionally, we can leverage other JavaScript libraries such as jQuery to perform DOM manipulations. In this tutorial, we will explore the process of removing a class using JavaScript.
Need of this concept:
There are multiple justifications for the necessity of eliminating classes from HTML. One particular situation arose during our development of a slider using HTML, CSS, and JavaScript. Initially, we established a primary class for our slider, and subsequently experimented with it by adding and removing this class from various images. Consequently, our slider was able to cycle through different photos. If you're not acquainted with this topic, you can find more information in the article here.
JavaScript simplifies the process of modifying HTML elements, making it easy to add or remove attributes and items. As jQuery is a JavaScript library, it can also be employed to eliminate classes. Both jQuery and JavaScript offer an extensive array of built-in methods for removing classes. We will explore each of these methods sequentially to gain a better understanding of their functionality.
A to-do list application has been developed utilizing JavaScript, CSS, and HTML. Users input the tasks they need to complete. Initially, all tasks are marked as active and require completion. Once a user successfully finishes a task, they have the option to strike it off their list of pending activities.
The items in the to-do list are originally tagged with the class=active prefix. This designation indicates to the user that the task remains pending and requires completion. Once the task is accomplished, the user is required to eliminate class=active from the corresponding action item in the to-do list. This alteration serves as a notification that the task has been completed. You can utilize either JavaScript or jQuery to remove the class from the HTML elements.
You can swiftly eliminate a class utilizing either JavaScript or jQuery. Let’s explore and understand the process of removing a class with JavaScript.
How Can a Class Be Removed in JavaScript?
There are numerous built-in methods available in both JavaScript and jQuery that allow you to eliminate a class. In this section, we will explore each of these methods and understand how they operate.
Remove Method:
JavaScript includes a simple method known as remove, which allows you to eliminate classes from elements. To use it, you simply need to identify the specific element from which you intend to remove a class. After selecting the element, you can invoke the remove function from the classList property of that element. The classList property retrieves all classes associated with the specified element. You can then specify the class you wish to eliminate from the class list and pass it to the remove method. Additionally, the remove method can accept multiple arguments, enabling you to designate several classes for removal from the element at once. This feature simplifies the management of multiple classes for a single element, particularly when developing intricate web applications that require such handling.
Syntax:
element.classList.remove(className);
toggleClass Method:
In JavaScript, the delete method can be likened to the toggleClass function. The main difference lies in the fact that it only temporarily disables certain features of the class instead of entirely removing it. When your intention is to switch a class on or off, you employ the toggleClass method.
The toggleClass function allows you to add or remove the same class from an element. For example, suppose you want to eliminate a class each time a button is clicked, but you also want to reapply that class when the button is clicked a second time. In this case, the toggleClass function would be appropriate. It is important to note that the toggleClass method is exclusively available in jQuery.
The toggleClass function is applied to an element to enable the toggling of a class, functioning similarly to the remove method.
Syntax:
$(elementName).toggleClass(className);
removeClass Method:
Utilize the removeClass method in jQuery to delete a class instead of toggling it. The jQuery library is wholly removed when employing the removeClass function. While the syntax for removeClass and toggleClass is the same, their operations are fundamentally distinct. Once a class has been removed through the removeClass method, it cannot be reintroduced without the use of the addClass method in jQuery; it is permanently eliminated from the element.
Syntax:
$(elementName).removeClass(className);
Let’s engage in some practical exercises focused on eliminating classes in JavaScript through various real-life scenarios.
Example to remove class in JavaScript:
At this point, we will explore instances of class removal within both JavaScript and jQuery. Additionally, we will acquire an understanding of the three distinct methods for removing classes in JavaScript and jQuery by engaging in practical examples.
In practical applications, we often employ specific varieties of event listeners when creating features that require the deletion of a class. The process to eliminate the class from the element initiates when the user performs a certain action, such as pressing a key or clicking a button.
Some examples of removing classes in JavaScript:
Example of using removes method:
In this instance, we will demonstrate how to eliminate a class from an HTML element by utilizing the remove method provided by JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning How to remove class in JS</title>
<style>
.main {
width: 100%;
padding: 25px;
background-colour: coral;
colour: white;
font-size: 25px;
box-sizing: border-box;
margin:10px 0px 0px 0px;
}
</style>
</head>
<body>
<p>Click the "Remove Class" button to remove the "main" class from the DIV element:</p>
<button onclick="removeClass()">Remove Class</button>
<div id="mainDiv" class="main">
This is a DIV element.
</div>
<script>
function removeClass() {
var element = document.getElementById("mainDiv");
element.classList.remove("main");
}
</script>
</body>
</html>
Explanation:
In the preceding example, we eliminate the class main from the div element. We identified the element by utilizing the unique element id mainDiv. Subsequently, we added the onclick event listener, which triggers the removeClass method upon the user's button click. This function effectively facilitates the removal of the class main from the element.
Example of using toggleClass Method:
In this tutorial, we will utilize the toggleClass method from JQuery to eliminate a specific class from an HTML element.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning How to toggle class in JQuery</title>
<script src="https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" type="text/javascript"></script>
<style>
.main {
width: 100%;
padding: 25px;
background-colour: coral;
colour: white;
font-size: 25px;
box-sizing: border-box;
margin:10px 0px 0px 0px;
}
</style>
</head>
<body>
<p>Click the "Toggle Class" button to Toggle the "main" class from the DIV element:</p>
<button onclick="toggleClass()">Toggle Class</button>
<div id="mainDiv" class="main">
This is a DIV element.
</div>
<script>
function toggleClass() {
$("#mainDiv").toggleClass("main");
}
</script>
</body>
</html>
Explanation:
In the preceding example, we eliminated the class main from the div element. We identified the element utilizing its unique element id mainDiv. Subsequently, we incorporated the event listener onclick, which triggers the toggleClass method upon the user's click on the button. This function facilitates an easy way to alternate the main class of the element. The user is able to remove and reapply this class to the mainDiv. Unlike the remove class method, this technique does not entirely erase the class from the mainDiv function. If the button is clicked two times, the class is reinstated after its initial removal.
Should you intend to utilize this approach, ensure that you incorporate the JQuery script either within the head section or at the conclusion of the body section. Failing to do so will result in the browser not recognizing the function, thus preventing its effects from being displayed.
Example of using the removeClass Method:
In this demonstration, we will utilize JQuery's removeClass method to eliminate a class from an HTML element.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning How to remove class in JQuery</title>
<script src="https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" type="text/javascript"></script>
<style>
.main {
width: 100%;
padding: 25px;
background-colour: coral;
colour: white;
font-size: 25px;
box-sizing: border-box;
margin:10px 0px 0px 0px;
}
</style>
</head>
<body>
<p>Click the "Remove Class" button to Toggle the "main" class from the DIV element:</p>
<button onclick="removeClassJQuery()">Remove Class</button>
<div id="mainDiv" class="main">
This is a DIV element.
</div>
<script>
function removeClassJQuery() {
$("#mainDiv").removeClass("main");
}
</script>
</body>
</html>
Explanation:
In the preceding example, we remove the class main from the div element. We selected this specific element utilizing the unique element identifier mainDiv. When the user clicks the button, the event listener onclick triggers the removeClassJQuery function. This function efficiently facilitates the removal of the class main from the element.
Conclusion:
- You can remove classes with DOM Manipulation in JavaScript and associated libraries, such as JQuery .
- Depending on how you want to remove the class and which library you're using, you can employ a number of different techniques.
- The remove method in JavaScript allows you to remove the class attribute from any HTML element permanently.
- The removeClass method provided by JQuery permanently removes a class from any HTML Element .