Как спрятать все элементы с определённым классом?

Question

[olifem]

Как спрятать все элементы с классом "name"?

<div class="name"> 1 </div>
<div class="name"> 2 </div>
<div class="name2"> 3 </div>
<input type="button" onclick="a()" value="Hidde"/>

function a(){
	var name = document.getElementsByClassName('name');
  for(key in name) {
  	name[key].style.display="none";
  }

Answer 1

[0xD34F]

for (const n of document.getElementsByClassName('name')) {
  n.style.display = 'none';
}

или

.hidden {
  display: none;
}

document.querySelectorAll('.name').forEach(n => n.classList.add('hidden'));

Answer 2

[Роман]

Если JQ используется только для этого, то можно и без него вот так:

<input type="button" onclick="hide()" value="Hide" />

function hide() {
      for (let key of document.querySelectorAll('.name')) {
        key.hidden = true;
      }
    }

Если изменить вот так
key.hidden = !key.hidden;
..то кнопка будет и скрывать и показывать скрытое.

Answer 3

[ThunderCat]

1) Hidde???
2) зачем такие мучения? дайте кнопке id="hideButton", уберите инлайн onclick="a()" - это плохой стиль, подключите JQ и:

$('#hideButton').on('click', function(){
    $('.name').hide();
})

Comments

[olifem]

Не работает(
https://jsfiddle.net/olifem/b2r71510/

[ThunderCat]

подключите JQ

https://jsfiddle.net/np4o7cyv/