При выборе div блока он должен скрыться?

Question

[Виктор Уманский]

Всем здрасте я новичок в JS. Есть n-е количество div блоков, их может быть 1, 5 или 25. При клике на какой-то блок, он должен скрыться, сам блок скрывается, но только не тот который надо, допустим нажимаю на блок Я это id="8", а скрывается блок Н с id="1".
Не могу понять как сделать соответствующую проверку или надо использовать forEach, но не является массивом???
Заранее спасибо!

<div class="wrapper">
  <div class="show" id="1">Н</div>
  <div class="show" id="2">А</div>
  <div class="show" id="3">З</div>
  <div class="show" id="4">В</div>
  <div class="show" id="5">А</div>
  <div class="show" id="6">Н</div>
  <div class="show" id="7">И</div>
  <div class="show" id="8">Я</div>
</div>

.wrapper > div {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: white;
  background-color: red;
  margin: 4px;
  text-align: center;
  cursor: pointer;
}

div {
  padding: 20px;
}

.show-hidden {
  visibility: hidden;
}

document.querySelector('.wrapper').addEventListener('click', function(e){
  let id = e.target.id;
  let show = document.querySelector('.show');
  //console.log(id);
  //console.log(show);
show.classList.add('show-hidden');
  });

Answer 1

[v3shin]

document.querySelector('.show'); выбирает только первый элемент .show, а вам нужен кликнутый элемент.

document.querySelector(".wrapper").addEventListener("click", function (e) {
    e.target.closest('.show').classList.add("show-hidden");
});

Comments

[Виктор Уманский]

выбирает только первый элемент

, читал про closest, чет не понял его действия?

[v3shin]

Виктор Уманский, ищет элемент от текущего и вверх по DOM-дереву, включая текущий.

Answer 2

[godsplane]

document.querySelector(".wrapper").addEventListener("click", function (e) {
  let id = e.target.id;
  let show = document.querySelector(`#${id}`);
  show.classList.add("show-hidden");
});

Или

document.querySelector(".wrapper").addEventListener("click", function (e) {
  e.target.classList.add("show-hidden");
});

Comments

[Виктор Уманский]

Первый вариант в консоли выдает такую ошибку

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#${id}' is not a valid selector.

Второй вариант работает

Но первый то что мне нужно, потому что у меня сами блоки состоят из списка (ul li) , также там есть label и div и класс вставляется везде и сам li не скрывается, а скрывается названия блока, радио кнопка и т.д..

[godsplane]

Виктор Уманский, если честно хз почему не работает. если заменить id с цифр на буквы то работает

[godsplane]

https://stackoverflow.com/questions/37270787/uncau...
Если нужны цифры то можно использовать дата аттрибуты. либо добавить префикс

Answer 3

[Сергей Соколов]

Может, просто удалять кликнутые?

Comments

[Виктор Уманский]

Неплохо Вы так стилизовали)

[Сергей Соколов]

Виктор Уманский, проблему-то решает этот вариант?

[Виктор Уманский]

Сергей Соколов, нет, но этот вариант я взял на заметку, скажем так на будущие!)))