如何通过点击Exit按钮移除.container3的hide类（同.container2逻辑）

问题场景 #

现有页面包含.container1、.container2、.container3三个容器：

• 点击.container1内的Exit按钮，可移除.container2的hide类并隐藏.container1
• 需要实现：点击.container2内的Exit按钮时，移除.container3的hide类并隐藏.container2，但当前.container2的Exit按钮无法点击

问题原因 #

核心问题是.container2初始状态为隐藏（带有hide类），如果在页面加载时直接给它的Exit按钮绑定点击事件，会因元素处于不可见状态导致事件绑定失效；或者原代码未针对动态显示的元素做事件处理适配。

可运行的完整解决方案 #

HTML代码 #

<div class="container1">
  <p>Container 1 Content</p>
  <button class="exit-btn">Exit</button>
</div>

<div class="container2 hide">
  <p>Container 2 Content</p>
  <button class="exit-btn">Exit</button>
</div>

<div class="container3 hide">
  <p>Container 3 Content</p>
</div>

CSS代码 #

.hide {
  display: none;
}

.container1, .container2, .container3 {
  padding: 20px;
  margin: 10px 0;
  border: 1px solid #ccc;
}

.exit-btn {
  padding: 8px 16px;
  cursor: pointer;
}

JavaScript代码 #

// 用事件委托处理所有Exit按钮的点击，兼容动态显示的元素
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('exit-btn')) {
    const parentContainer = e.target.closest('[class^="container"]');
    
    if (parentContainer.classList.contains('container1')) {
      document.querySelector('.container2').classList.remove('hide');
      parentContainer.classList.add('hide');
    } else if (parentContainer.classList.contains('container2')) {
      document.querySelector('.container3').classList.remove('hide');
      parentContainer.classList.add('hide');
    }
  }
});

修复关键点 #

1. 事件委托机制：通过在document层面监听点击事件，不管元素初始是否隐藏，只要存在于DOM中，点击时就能触发逻辑，彻底解决动态元素的事件绑定问题。
2. 精准容器匹配：用closest()方法快速定位按钮所属的容器，再根据容器类名执行对应切换逻辑，逻辑清晰且易扩展。
3. 规范类操作：统一用classList.add()/classList.remove()控制显示隐藏，保持样式与逻辑分离，避免直接修改元素行内样式。

内容的提问来源于stack exchange，提问作者user17631451