CODEWITHSUNDEEP
javascript
MrGlass
MrGlass

Reputation: 9262

Hide all elements with class using plain Javascript

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.

Apparently SO wants me to edit this to clarify that it is not a question about modifying strings. It's not.

Upvotes: 46

Views: 177549

Answers (11)

Dairy Window
Dairy Window

Reputation: 1425

In the absence of jQuery, I would use this:

<script>
    var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.visibility = "hidden"; // or
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }
</script>

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

Upvotes: 56

datu-puti
datu-puti

Reputation: 1363

I really liked @Haritsinh Gohil's answer above, which inspired this answer that will toggle the visibility of the item using the hidden attribute

  function toggle() {
      document.querySelectorAll('div.sad').forEach(function(elem) {
          elem.hidden = !elem.hidden;
      });
  }
<button onclick="toggle()">I'm a button, click me to hide the saddies</button>

<div id="parent">
  <div class="happy">
    :)
  </div>
  <div class="sad">
    :(
  </div>
  <div class="sad">
    :'(
  </div>
  <div class="angry">
    >:(
  </div>
</div>

Upvotes: 0

connexo
connexo

Reputation: 56754

In modern JS, this one-liner will do:

document.querySelectorAll('.my-class').forEach(el => el.hidden = true);

Upvotes: 4

Ankith Cirgir
Ankith Cirgir

Reputation: 7

jQuery solution is straightforward:

$(".className").hide();

Upvotes: -1

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6272

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) {
    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.

Upvotes: 38

Bekim Bacaj
Bekim Bacaj

Reputation: 5955

Using pure HTML\5 Using HTML safe property names \ values. Pure JavaScript conventional access, target and manipulation of the cssRule of interest.

p.s.: No recursion iteration no recursive calls to DOM and no element iteration and value assignments. Makes this the fastest possible solution, where the only bottleneck is the machine dependent rendering and refresh capability.

onclick = function( ) {
    with( document.styleSheets.style1.cssRules[0] )
    style.display = style.display ? "" : "none";
}
.showHide{ 
     color: #777;
}
<!DOCTYPE html>
<html>
<head>
<style id=style1>
.showHide{
}
</style>
</head>
<body>
   <div class=showHide>hide this element</div>
   <div class=showHide>hide this element</div>
   <div class=showHide>hide this element</div>
   <div class=dontHide>this element will not hide</div>
   <div class=showHide>hide this element</div>
</body>
</html>

Upvotes: 0

Arthur Serafim
Arthur Serafim

Reputation: 423

As simple as the following:

let elements = document.querySelectorAll('.custom-class')

elements.forEach((item: any) => {
  item.style.display = 'none'
})

With that, you avoid all the looping, indexing, and such.

Upvotes: 4

Mat2
Mat2

Reputation: 151

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);

Upvotes: 10

HoffZ
HoffZ

Reputation: 7729

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 < l; i++) {
    myClasses[i].style.display = 'none';
}

Demo

Upvotes: 21

whadar
whadar

Reputation: 4481

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');

Upvotes: -3

Zhasulan Berdibekov
Zhasulan Berdibekov

Reputation: 1087

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<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";
}

Upvotes: 11

Related Questions