Форум

aandrey · #1 (**permalink**) 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 · #2 (**permalink**) 05.06.2017, 13:42

Сообщение от aandrey

Как сделать так чтобы при клике на кнопку элемент где id="GG" не было видно, причем хочется скрыть весь блок

Как вариант...

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

j0hnik · #3 (**permalink**) 05.06.2017, 13:45

Сообщение от ksa

Как вариант...

$('#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 · #4 (**permalink**) 05.06.2017, 13:50

Сообщение от j0hnik

previousElementSibling

parentNode

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

ksa · #5 (**permalink**) 05.06.2017, 13:53

Сообщение от j0hnik

previousElementSibling

Цитата:

Свойство previousElementSibling содержит соседа сверху (предыдущий элемент).

http://theory.phphtml.net/javascript...ntSibling.html

j0hnik · #6 (**permalink**) 05.06.2017, 13:58

Сообщение от ksa

http://theory.phphtml.net/javascript...ntSibling.html

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

j0hnik · #7 (**permalink**) 05.06.2017, 14:04

Сообщение от ksa

Как вариант...

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

Как предложили вы он сразу исчезнет, но только если будет Jquery, иначе ничего не изменится.

aandrey · #8 (**permalink**) 05.06.2017, 17:18

Сообщение от j0hnik

надо же при клике

<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 · #9 (**permalink**) 05.06.2017, 17:46

Сообщение от aandrey

только для первого элемента работает, если их 2 и больше то скроет только первый

Потому, что ID является уникальным значением. Меняйте на класс и соответствующий обработчик.

j0hnik · #10 (**permalink**) 05.06.2017, 21:50

Сообщение от aandrey

Спасибо, но только для первого элемента работает, если их 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>

так?

Форум

Справочник

Discord чат

Курсы javascript