Как скрыть div с именем класса кнопки по клику? - PullRequest
Новая
       72

Как скрыть div с именем класса кнопки по клику?

0 голосов
/ 03 мая 2020

Мне нужно - нажмите на кнопку, чтобы скрыть каждый div, но здесь в моем коде скрыть только первый, затем не работает. 

const closeInnermenu = document.querySelector('closeInnrmenu');
const innerC = document.querySelector('.inner-container')
closeInnermenu.addEventListener('click', () => {
  innerC.style.display = 'none'
})
<div class="inner-container">
  <div>Demo 1</div>
  <button class="closeInnrmenu"></button>
</div>
<div class="inner-container">
  <div>Demo 2</div>
  <button class="closeInnrmenu"></button>
</div>

Ответы [ 3 ]

1 голос
/ 03 мая 2020

Использование: 

let buttonClose = document.querySelectorAll('.closeInnrmenu')

for(let btns of buttonClose){
  btns.addEventListener('click', function func(e) {
    this.parentNode.style.display = 'none'
  })
}
<div class="inner-container">
  <div>Demo 1</div>
  <button class="closeInnrmenu">Close</button>
</div>
<div class="inner-container">
  <div>Demo 2</div>
  <button class="closeInnrmenu">Close</button>
</div>
1 голос
/ 03 мая 2020

Получить все кнопки, используя document.querySelectorAll('.closeInnrmenu') вместо document.querySelector, поскольку это даст только первый соответствующий элемент. Затем выполните итерацию и добавьте прослушиватель событий к кнопке, чтобы при нажатии получить closest div и добавить к нему стиль.

Также здесь есть ошибка типа const closeInnermenu = document.querySelector('closeInnrmenu');. Вам нужно передать точку в качестве селектора класса 

document.querySelectorAll('.closeInnrmenu').forEach((item) => {
  item.addEventListener('click', function() {
    this.closest('div').style.display = 'none'
  })

})
<div class="inner-container">
  <div>Demo 1</div>
  <button class="closeInnrmenu">Close</button>
</div>
<div class="inner-container">
  <div>Demo 2</div>
  <button class="closeInnrmenu">Close</button>
</div>
0 голосов
/ 03 мая 2020

Вы можете делегировать

Если вы не хотите переносить в div, используйте 

document.addEventListener('click'

Здесь я завернул 

document.getElementById("container").addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.classList.contains("closeInnrmenu")) {
    tgt.previousElementSibling.style.display = 'none'
  }  
})
<div id="container">
  <div class="inner-container">
    <div>Demo 1</div>
    <button class="closeInnrmenu"></button>
  </div>
  <div class="inner-container">
    <div>Demo 2</div>
    <button class="closeInnrmenu"></button>
  </div>
</div>
...