How to remove a class from elements in pure JavaScript

Question

I would like to know how to select all elements with class names  widget  and  hover  and then remove class  hover  from these elements   I have the following JavaScript code that selects all elements with class  widget  and  hover    var elements   document getElementsByClassName  widget hover    console log elements     This seems to work and outputs something like this  with no errors     div  widget       The problem is that if I try to remove the class  hover   I get an error   var elements   document getElementsByClassName  widget hover    console log elements   elements classList remove  hover      This outputs    item  function  length  0 Uncaught TypeError  Cannot call method  remove  of undefined    Can anyone tell me what I m doing wrong     Please note that I have it working in jQuery       widget hover   removeClass  hover          but I m looking for a solution in pure JavaScript

User · Answer

elements is an array of DOM objects  You should do something like this  for  var i   0  i  lt  elements length  i         elements i  classList remove  hover        ie  enumerate the elements collection  and for each element inside the collection call the remove method

User · Answer

var elems   document querySelectorAll   widget hover        forEach call elems  function el        el classList remove  hover            You can patch  classList into IE9  Otherwise  you ll need to modify the  className   var elems   document querySelectorAll   widget hover        forEach call elems  function el        el className   el className replace   bhover b              The  forEach   also needs a patch for IE8  but that s pretty common anyway

User · Answer

Given worked for me  document querySelectorAll  quot  widget hover quot   forEach obj  gt obj classList remove  quot hover quot

User · Answer

Find elements   var elements   document getElementsByClassName  widget hover      Since elements is a live array and reflects all dom changes you can remove all hover classes with a simple while loop   while elements length  gt  0       elements 0  classList remove  hover

User · Answer

It s 2021    keep it simple  Times have changed and now the cleanest and most readable way to do this is  Array from document querySelectorAll  widget hover    forEach  el    gt  el classList remove  hover      If you can t support arrow functions then just convert it like this  Array from document querySelectorAll  widget hover    forEach function el         el classList remove  hover         Additionally if you need to support extremely old browsers then use a polyfil for the forEach and Array from and move on with your life

User · Answer

This might help  let allElements   Array from document querySelectorAll   widget hover    for  let element of allElements      element classList remove  hover

[javascript] How to remove a class from elements in pure JavaScript?

Examples related to javascript

Examples related to getelementsbyclassname