This blog will illustrate the approaches to remove all elements with specific classes using JavaScript.
How to Remove all Elements With a Specific Class Using JavaScript?
To remove all elements with a specific class using JavaScript, implement the following approaches in combination with the “forEach()” and “remove()” methods:
- “querySelectorAll()” method.
- “Array.from()” and “getElementsByClassName()” methods.
Let’s illustrate the stated methods one by one!
Approach 1: Remove all Elements With Specific Class in JavaScript Using querySelectorAll() Method
The “forEach()” method applies a function for each element contained in an array. The “remove()” method omits an element from the document. Whereas the “querySelectorAll()” method fetches all the elements matching a CSS selector(s) and gives a node list in return. These methods can be applied in combination to fetch various elements with identical classes, iterate through each element and remove them upon the button click.
Syntax
In the above-given syntax:
- function: It is the function that is to be executed for each element in an array.
- current: This parameter signifies the current array value.
- index: It points to the current element’s index.
- array: It refers to the current array.
- this: It corresponds to the value being passed to the function.
In the given syntax:
- “selectors” corresponds to one or more than one CSS selector.
Example
Let’s go through the following example:
<h2 class= "elem">This is an Image</h2>
<img src="template5.png" class="elem">
<br>
<button onclick="removeElements()">Click to remove Elements</button>
<br><br>
</body></center>
<script type="text/javascript">
function removeElements(){
let get = document.querySelectorAll('.elem');
get.forEach(element => {
element.remove();
});
}
</script>
Apply the following steps in the above code snippet:
- In the HTML code, the “<h2>” and “<img>” elements, respectively have the same classes.
- Also, create a button having an “onclick” event invoking the function removeElements().
- Now, in the JS code, declare a function named “removeElement()”.
- In its definition, apply the “querySelectorAll()” method and point to the specified class against the elements as stated in the first step.
- After that, invoke the “forEach()” method to access each element via iteration.
- Lastly, apply the “remove()” method to remove the iterated elements in the previous step against the fetched class.
- This will result in removing all elements having the particular class upon the button click.
Output
In the above output, it can be observed that the visible elements on the Document Object Model are removed upon the button click.
Approach 2: Remove all Elements With Specific Class in JavaScript Using Array.from() and getElementsByClassName() Methods
The “Array.from()” method returns an array from an object having the length of the array as its parameter. The “getElementsByClassName()” method gives an element’s collection with a specified class name(s). These methods can be combined to access the elements by class and return and remove them by iterating through them.
Syntax
In the above-given syntax:
- “object” refers to the object to be converted into an array.
- “map” corresponds to the map function that needs to be mapped on each item.
- “value” points to the value to be utilized as “this” for the map function.
In the given syntax:
- “class” represents the element’s class name.
Example
Let’s move on to the following example:
<h2 class="elem">Remove the Elements</h2>
<input type= "text" class= "elem" placeholder="Enter Text..."><br>
<input type= "checkbox" class= "elem">
<br><br>
<button onclick="removeElements()">Click to remove Elements</button>
<br>
</body></center>
<script type="text/javascript">
function removeElements(){
let get = Array.from(document.getElementsByClassName('elem'));
get.forEach(element => {
element.remove();
});
}
</script>
In the above lines of code:
- Likewise, include the “<h2>”, and the “<input>” elements having the same classes.
- Similarly, create a button with an “onclick” event redirecting to the function removeElements().
- In the JavaScript code, define a function named “removeElements()”.
- In its definition, apply the “Array.from()” and “getElementsByClassName()” methods in combination to return the fetched elements against the specified class in the form of an array.
- After that, apply the “forEach()” and “remove()” methods to iterate through the elements in the previous step and remove them upon the button click, respectively.
Output
The above output signifies that the desired functionality is fulfilled.
Conclusion
The “forEach()” and “remove()” methods combined with the “querySelectorAll()” method or “Array.from()” and “getElementsByClassName()” methods can be used to remove all elements with specific classes using JavaScript. The former methods can be applied to access the elements by class directly and remove them by iterating along them thereby involving less code complexity. The latter methods can be implemented in combination to access the elements by class, return them in the form of an array and remove them by iterating through them. This article explained how to remove all elements with a specific class using JavaScript.
