Hide all elements with class using plain Javascript

Question

I normally use document getElementById  id   style display    none  to hide a single div via Javascript  Is there a similarly simple way to hide all elements belonging to the same class   I need a plain Javascript solution that does not use jQuery

User · Answer

Assuming you are dealing with a single class per element:

function swapCssClass(a,b) {
    while (document.querySelector('.' + a)) {
        document.querySelector('.' + a).className = b;
    }
}

and then call simply call it with

swapCssClass('x_visible','x_hidden');

User · Answer

I use a modified version of this   function getElementsByClass nameOfClass          var temp  all  elements     all   document getElementsByTagName         elements          for var a 0 a lt all length a          temp   all a  className split           for var b 0 b lt temp length b            if temp b   nameOfClass             elements push ALL a             break                       return elements       And JQuery will do this really easily too

User · Answer

Late answer  but I found out that this is the simplest solution  if you don t use jQuery    var myClasses   document querySelectorAll   my-class        i   0      l   myClasses length   for  i  i  lt  l  i          myClasses i  style display    none       Demo

User · Answer

In the absence of jQuery  I would use something like this    lt script gt      var divsToHide   document getElementsByClassName  classname      divsToHide is an array     for var i   0  i  lt  divsToHide length  i             divsToHide i  style visibility    hidden      or         divsToHide i  style display    none      depending on what you re doing        lt script gt    This is taken from this SO question  Hide div by class id  however seeing that you re asking for  old-school  JS solution  I believe that getElementsByClassName is only supported by modern browsers

User · Answer

As simple as the following  let elements   document querySelectorAll   custom-class    elements forEach  item  any    gt      item style display    none      With that  you avoid all the looping  indexing  and such

User · Answer

I would propose a different approach  Instead of changing the properties of all objects manually  let s add a new CSS to the document      License  CC0    var newStylesheet   document createElement  style    newStylesheet textContent     classname   display  none      document head appendChild newStylesheet

User · Answer

There are many ways to hide all elements which has certain class in javascript one way is to using for loop but here i want to show you other ways to doing it   1 forEach and querySelectorAll   classname    document querySelectorAll   classname   forEach function el       el style display    none         2 for   of with getElementsByClassName  for  let element of document getElementsByClassName  classname        element style display  none       3 Array protoype forEach getElementsByClassName  Array prototype forEach call document getElementsByClassName  classname    function el           Do something amazing below     el style display    none         4     forEach and getElementsByClassName     forEach call document getElementsByClassName  classname    function  el        el style display    none         i have shown some of the possible ways  there are also more ways to do it  but from above list you can Pick whichever suits and easy for you    Note  all above methods are supported in modern browsers but may be some of them will not work in old age browsers like internet explorer

User · Answer

function getElementsByClassName classname  node         if  node  node   document getElementsByTagName  body   0       var a           var re   new RegExp    b    classname      b        var els   node getElementsByTagName           for var i 0 j els length  i lt j  i            if re test els i  className  a push els i        return a     var elements   new Array    elements   getElementsByClassName  yourClassName    for i in elements         elements i  style display    none

[javascript] Hide all elements with class using plain Javascript

Examples related to javascript