Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрыть несколько блоков по клику (https://javascript.ru/forum/dom-window/69196-skryt-neskolko-blokov-po-kliku.html)

aandrey 05.06.2017 11:54
Скрыть несколько блоков по клику
 
Привет, есть код
<div><input type='checkbox' name='line[0]' />123</div>
<div><input type='checkbox' name='line[1]' /><span id="GG">1234</span></div>
<div><input type='checkbox' name='line[2]' />4567</div>
<div><input type='checkbox' name='line[3]' />999</div>

Как сделать так чтобы при клике на кнопку элемент где id="GG" не было видно, причем хочется скрыть весь блок
<div><input type='checkbox' name='line[1]' /><span id="GG">1234</span></div>

Спасибо!

ksa 05.06.2017 13:42
Цитата:
Сообщение от aandrey
Как сделать так чтобы при клике на кнопку элемент где id="GG" не было видно, причем хочется скрыть весь блок
Как вариант...

$('#GG').parent().hide();

j0hnik 05.06.2017 13:45
Цитата:
Сообщение от ksa (Сообщение 454545)
Как вариант...

$('#GG').parent().hide();
надо же при клике
<head>
	<meta charset="utf-8">
</head>
<body>
	<div><input type='checkbox' name='line[0]' />123</div>
	<div><input type='checkbox' name='line[1]' /><span id="GG">1234</span></div>
	<div><input type='checkbox' name='line[2]' />4567</div>
	<div><input type='checkbox' name='line[3]' />999</div>
	<script>

	document.getElementById("GG").previousElementSibling.onclick = function(){
		this.parentNode.style.display='none'
	}
</script>
</body>

ksa 05.06.2017 13:50
Цитата:
Сообщение от j0hnik
previousElementSibling
 
parentNode

http://www.fpublisher.ru/documentati...cs#hparentnode

ksa 05.06.2017 13:53
Цитата:
Сообщение от j0hnik
previousElementSibling
Цитата:
Свойство previousElementSibling содержит соседа сверху (предыдущий элемент).
http://theory.phphtml.net/javascript...ntSibling.html

j0hnik 05.06.2017 13:58
Цитата:
Сообщение от ksa (Сообщение 454550)
Я вкурсе!
автор сказал :Как сделать так чтобы при клике на кнопку элемент где id="GG" не было видно, причем хочется скрыть весь блок
как я понял берем элемент span с id="GG" выбираем его (рядом стоящий) чекбокс, по клику на него скрываем весь блок.

j0hnik 05.06.2017 14:04
Цитата:
Сообщение от ksa (Сообщение 454545)
Как вариант...

$('#GG').parent().hide();
Как предложили вы он сразу исчезнет, но только если будет Jquery, иначе ничего не изменится.

aandrey 05.06.2017 17:18
Цитата:
Сообщение от j0hnik (Сообщение 454546)
надо же при клике
<head>
	<meta charset="utf-8">
</head>
<body>
	<div><input type='checkbox' name='line[0]' />123</div>
	<div><input type='checkbox' name='line[1]' /><span id="GG">1234</span></div>
	<div><input type='checkbox' name='line[2]' />4567</div>
	<div><input type='checkbox' name='line[3]' />999</div>
	<script>

	document.getElementById("GG").previousElementSibling.onclick = function(){
		this.parentNode.style.display='none'
	}
</script>
</body>
Спасибо, но только для первого элемента работает, если их 2 и больше то скроет только первый

laimas 05.06.2017 17:46
Цитата:
Сообщение от aandrey
только для первого элемента работает, если их 2 и больше то скроет только первый
Потому, что ID является уникальным значением. Меняйте на класс и соответствующий обработчик.

j0hnik 05.06.2017 21:50
Цитата:
Сообщение от aandrey (Сообщение 454591)
Спасибо, но только для первого элемента работает, если их 2 и больше то скроет только первый
 
<head>
	<meta charset="utf-8">
</head>
<body>
	<div><input type='checkbox' name='line[0]' />123</div>
	<div><input type='checkbox' name='line[1]' />1234</div>
	<div><input type='checkbox' name='line[2]' />4567</div>
	<div><input type='checkbox' name='line[3]' />999</div>
	<script>

var inp = document.querySelectorAll("input[type='checkbox']");
	[].forEach.call(inp, function(inp) {
	inp.addEventListener('click', function() {
		this.parentNode.style.display='none';
	});
});
</script>
</body>


так?


Часовой пояс GMT +3, время: 04:05.