Как с помощью java script применить visibility: hidden к одному из div?

Question

На странице есть два окна, точнее они появляются когда нажимаешь на одну из кнопок. У этих окон одинаковый id и class. Но есть отличие в том, что на них есть div с разным классом. Получается так, что когда я пытаюсь скрыть одно окно, скрываются оба. Есть какая-то возможность скрыть только одно? Если не знаете как не нужно писать измени id или class.

<html>
<div class="bp1" id="bp1"</div>
<div class="a"</div>

<div class="bp1" id="bp1" =</div>
<div class="b"</div>
<html>

Answer 1

Что-то простое, на коленках буквально.

const buttonA = document.querySelector('#hidedivwithclassa');
const buttonB = document.querySelector('#hidedivwithclassb');

const divA = document.querySelector('.a');
const divB = document.querySelector('.b');

buttonA.addEventListener('click', hideDivA);
buttonB.addEventListener('click', hideDivB);

function hideDivA() {
    divA.parentNode.style.display = "none";
}

function hideDivB() {
    divB.parentNode.style.display = "none";
}

<div class="bp1" id="bp1">
    class a
   <div class="a">inner div class a</div>
</div>

<div class="bp1" id="bp1">
   class b
   <div class="b"> inner div class b</div>
</div>

<input id="hidedivwithclassa" type="button" value="A">
<input id="hidedivwithclassb" type="button" value="B">

Answer 2

Есть какая-то возможность скрыть только одно?

Можно использовать порядок следования элементов в DOM-дереве и взять предыдущий элемент...

document.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'BUTTON') return
  const ltt = o.dataset.letter
  let od = document.querySelector('.' + ltt)
  od = od.previousElementSibling
  od.classList.toggle('off')
})

.off {
  visibility: hidden;
}

<div class="bp1" id="bp1">Зависит от A</div>

<div class="a">A</div>

<div class="bp1" id="bp1">Зависит от B</div>
<div class="b">B</div>

<button data-letter='a'>A</button>
<button data-letter='b'>B</button>

Answer 3

Два элемента с одинаковым ID уже ошибка. id на странице может быть только 1. Не очень понятно, чем скрываются элементы. Но как вариант

const a = document.querySelector('.a');
const b = document.querySelector('.b');

const btns = document.querySelectorAll('.btn');

const clickHandler = (evt) => {
  evt.preventDefault();
  const target = evt.target.closest('.btn');
  if (!target) return;
  if (target.classList.contains('a')) {
    a.closest('.bp1').style.visibility = 'hidden';
    b.closest('.bp1').style.visibility = 'visible';
  } else {
    a.closest('.bp1').style.visibility = 'visible';
    b.closest('.bp1').style.visibility = 'hidden';
  }
}

btns.forEach(btn => btn.addEventListener('click', clickHandler))

<div class="bp1" id="bp1">
    class a
   <div class="a">inner div class a</div>
</div>

<div class="bp1" id="bp1">
   class b
   <div class="b"> inner div class b</div>
</div>

<button class='btn a'>a</button>
<button class='btn b'>b</button>

БЛОГ НА HUSL

Как с помощью java script применить visibility: hidden к одному из div?

Ответы (3 шт):