много <div> а скрипт один

[DimaRogov]

вопрос такой:

есть много элементов <div id = 'name'></div> :

<div id = 'name'></div>
<div id = 'name'></div>
<div id = 'name'></div>
<div id = 'name'></div>
         ......
<div id = 'name'></div>

<button id = 'but'>Click me</button>

есть скрипт:

var but = document.getElementById('but');
var elem = document.getElementById('name');

//убирает элемент <div id= 'name'></div> 
var hid = function() { elem.style.display = 'none'; } 
                      

but.addEventListener('click',hid,false);

Вопрос: Почему убирается только первый элемент <div id= 'name'></div>

[Триви]

Потому что айди, он на то и айди, чтобы быть уникальным!

[nikita.mmf]

Вот костыль

document.getElementById('but').addEventListener('click', function( e ) { 
	var elem = (e && e.target || event.srcElement || document).previousSibling;
	for( ;elem; elem = elem.previousSibling ) {
		if ( elem.id == "name" ) {
			elem.style.display = "none"
		}
	}
}, false);

[devote]

<div id="name">1</div> 
<div id="name">2</div> 
<div id="name">3</div> 
<div id="name">4</div> 
<div id="name">5</div> 
  
<button id = 'but'>Click me</button>

<script type="text/javascript">
var but = document.getElementById('but'); 
var elem = document.querySelectorAll('[id="name"]'); 
  
//убирает элемент <div id= 'name'></div>  
var hid = function() {
    for(var i = 0; elem[ i ]; i++ ) {
        elem[ i ].style.display = 'none';
    }
}  
                        
  
but.addEventListener('click',hid,false);
</script>

[walik]

Зачем человеку советовать костыли ? что бы он всегда так делала потом ?
Что мешает его направить на правильный путь ? К примеру сказать что бы использовал класс вместо ИД ?

[unclechu]

id должен быть уникальным! Используй class.

<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
…
<div class='name'></div>

var c = document.getElementsByClassName('name');
for (var i=0; i<c.length; i++) {
c[i].style.display = 'none';
}

Вроде так.

[Триви]

<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
<div class='name'></div>
…
<div class='name'></div>

В IE getElementsByClassName работать не будет, потому что его там нет.
Тут придётся реализовать новый метод с таким же именем
(в инете таких примеров навалом)
но недостаток метода в том, что он перебирает все элементы DOM
в поисках элемента с нужным классом, а это всё таки время..

Может лучше делать такую штуку с указанием на родителя, если он известен?
Что скажут на эту тему профи?
Или это уже параноя? )))

[ваый]

Может лучше делать такую штуку с указанием на родителя, если он известен?
Что скажут на эту тему профи?
Или это уже параноя? )))

так это и делается, все правильно, указывается контекст для поиска, если известен. например, http://javascript.ru/unsorted/top-10...lementsbyclass

[Триви]

контекст для поиска

Вот они правильные слова!
Никак не мог сформулировать по причине нубизма))
Но чуял всё правильно

[DimaRogov]

спасибо всем кто написал, но после слов триви уже все понял=)