如何隐藏类名为button on click的div？

Question

我需要 - 点击按钮来隐藏每个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>

Answer 1

您可以委托

如果你不想用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>

Answer 2

获取所有按钮使用 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>

Answer 3

使用。

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>