如何在点击时隐藏 div 和 class 按钮名称？

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

使用 document.querySelectorAll('.closeInnrmenu') 而不是 document.querySelector 获取所有按钮，因为这只会给出第一个匹配元素。然后迭代并向按钮添加事件侦听器，以便在单击时获取 closest div 并为其添加样式。

这里还有一个类型错误const closeInnermenu = document.querySelector('closeInnrmenu');。您需要将点作为 class 选择器

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 2

使用：

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>

Answer 3

你可以委派

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

如何在点击时隐藏 div 和 class 按钮名称？

How to hide the div with class name of button on click?

javascript

dom-events