Ocultar todos los elementos con clase usando Javascript simple

var myClasses = document.querySelectorAll('.my-class'),
    i = 0,
    l = myClasses.length;

for (i; i < l; i++) 
    myClasses[i].style.display = 'none';

Manifestación

Hay muchas formas de ocultar todos los elementos que tienen cierta clase en javascript, una forma es usar for loop, pero aquí quiero mostrarle otras formas de hacerlo.

1.para cada uno y querySelectorAll('.classname')

document.querySelectorAll('.classname').forEach(function(el) 
   el.style.display = 'none';
);

2.para... de con 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.[ ].para cada uno y getElementsByClassName

[].forEach.call(document.getElementsByClassName("classname"), function (el) 
    el.style.display = 'none';
);

He mostrado algunas de las formas posibles, también hay más formas de hacerlo, pero de la lista anterior puede elegir la que más le convenga y le resulte más fácil.

Nota: todos los métodos anteriores son compatibles con los navegadores modernos, pero es posible que algunos de ellos no funcionen en navegadores antiguos como Internet Explorer.

Si te ha resultado de utilidad nuestro artículo, agradeceríamos que lo compartas con el resto seniors de esta forma nos ayudas a dar difusión a nuestra información.

Utiliza Nuestro Buscador