При желании код ниже можно не смотреть,мне не понятна только строка (1) Идя по цепочки родителей вверх,в свой свойство hidden записывают наоборот свойство не скрывающее узел? Цель задания:Дан список сообщений. Добавьте каждому сообщению кнопку для его удаления. Используйте делегирование событий. Один обработчик для всего.
body {
margin: 10px auto;
width: 470px;
}
h3 {
margin: 0;
padding-bottom: .3em;
padding-right: 20px;
font-size: 1.1em;
}
p {
margin: 0;
padding: 0 0 .5em;
}
.pane {
background: #edf5e1;
padding: 10px 20px 10px;
border-top: solid 2px #c4df9b;
position: relative;
}
.remove-button {
position: absolute;
font-size: 110%;
top: 0;
color: darkred;
right: 10px;
display: block;
width: 24px;
height: 24px;
border: none;
background: transparent;
cursor: pointer;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
</head>
<body>
<div id="messages-container">
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.
</p>
<button class="remove-button">[x]</button>
</div>
</div>
<script>
var container = document.getElementById('messages-container');
container.onclick = function(event) {
if (!event.target.classList.contains('remove-button')) return;
event.target.parentNode.hidden = !event.target.parentNode.hidden; // (1)
}
</script>
</body>
</html>