How To Remove A Class From Multiple Elements Using JavaScript

Manipulating classes of multiple elements is a common task when working with JavaScript in web development. Sometimes, you may need to remove a specific class from multiple elements to alter their appearance or behavior. This can be achieved through various methods in JavaScript.

In this article, we will explore three possible approaches to remove a class from multiple elements. These methods include using a for loop to iterate through the elements and remove the class, leveraging the forEach() method along with Array.from() to convert the collection into an array, and utilizing the querySelectorAll() method to select elements and remove the class using classList.remove(). By understanding these techniques, you will have the necessary knowledge to efficiently remove a class from multiple elements and make dynamic changes to your web pages using JavaScript.

01. Using "querySelectorAll()" and "classList.remove()"
02. Using getElementsByClassName() and a Loop:
03. Using "querySelectorAll()" and "classList.toggle()"
04. Using "Array.from()"

01. Using "querySelectorAll()" and "classList.remove()"

<!DOCTYPE html>
<html>
<head>
  <style>
    .bg-color {
      background-color: lightgreen;
      padding: 10px;
    }
    #btn {
      background-color: coral;
      border-radius: 20px;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }
    
  </style>
</head>
<body>
  
  <button onclick="removeClass()" id="btn">Remove Class</button>
  <p class="bg-color">Paragraph 1</p>
  <p class="bg-color">Paragraph 2</p>
  <p class="bg-color">Paragraph 3</p>

  <script>
    function removeClass() {
      var elements = document.querySelectorAll('.bg-color');
      elements.forEach(function(element) {
        element.classList.remove('bg-color');
      });
    }
  </script>
</body>
</html>

In this method, we use document.querySelectorAll('.bg-color') to select all elements with the class "bg-color" and store them in the elements variable. We then iterate over the elements using forEach() and remove the class "bg-color" from each element by calling element.classList.remove('bg-color').

Read Also:

02. Using getElementsByClassName() and A Loop

<!DOCTYPE html>
<html>
<head>
  <style>
    .bg-color {
      background-color: lightgreen;
      padding: 10px;
    }
    #btn {
      background-color: coral;
      border-radius: 20px;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }
    
  </style>
</head>
<body>
  
  <button id="btn">Remove Class</button>
  <p class="bg-color">Paragraph 1</p>
  <p class="bg-color">Paragraph 2</p>
  <p class="bg-color">Paragraph 3</p>

 <script>
   const btn = document.getElementById('btn');
   const elements = document.querySelectorAll('.bg-color');

   btn.addEventListener('click', function () {
    for (let i = 0; i < elements.length; i++) {
      elements[i].classList.remove('bg-color');
    }

});
  </script>
</body>
</html>

In this method, we use document.getElementsByClassName('bg-color') to select all elements with the class "bg-color" and store them in the elements variable. We then iterate over the elements using a for loop and remove the class "bg-color" from each element by calling elements[i].classList.remove('bg-color').

Read Also:

03. Using "querySelectorAll()" and "classList.toggle()"

<!DOCTYPE html>
<html>
<head>
  <style>
   .bg-color {
      background-color: lightgreen;
      padding: 10px;
    }
    #btn {
      background-color: coral;
      border-radius: 20px;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <button onclick="toggleClass()" id="btn">Toggle Class</button>
  <p class="bg-color">Paragraph 1</p>
  <p class="bg-color">Paragraph 2</p>
  <p class="bg-color">Paragraph 3</p>  

  <script>
    function toggleClass() {
      var elements = document.querySelectorAll('.bg-color');
      elements.forEach(function(element) {
        element.classList.toggle('bg-color');
      });
    }
  </script>
</body>
</html>

In this method, we use document.querySelectorAll('.bg-color') to select all elements with the class "bg-color" and store them in the elements variable. We then iterate over the elements using forEach() and toggle the class "bg-color" for each element by calling element.classList.toggle('bg-color'). This method allows you to add the class if it's not present and remove it if it is already present.

04. Using "Array.from()"

<!DOCTYPE html>
<html>
<head>
  <style>
    .bg-color {
      background-color: lightgreen;
      padding: 10px;
    }
    #btn {
      background-color: coral;
      border-radius: 20px;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }
    
  </style>
</head>
<body>
  
  <button id="btn" onclick="removeClass()">Remove Class</button>
  <p class="bg-color">Paragraph 1</p>
  <p class="bg-color">Paragraph 2</p>
  <p class="bg-color">Paragraph 3</p>

 <script>
   function removeClass() {
      var elements = document.getElementsByClassName('bg-color');
      var elementArray = Array.from(elements);

      elementArray.forEach(function(element) {
        element.classList.remove('bg-color');
      });
    }
  </script>
</body>
</html>

In this example, we first select the elements with the class "bg-color" using document.getElementsByClassName('bg-color') and store them in the elements variable. Then, we convert the HTMLCollection object obtained from getElementsByClassName() to an array using Array.from(elements), and assign it to the elementArray variable. We can then use the forEach() method on elementArray to iterate over each element and remove the class "bg-color" using element.classList.remove('bg-color')

The Array.from() method is useful when you want to convert an array-like or iterable object (such as HTMLCollection) into a proper array, allowing you to use array methods for manipulation.

Read Also:

Archive