如何使用原生JS/HTML/CSS仅隐藏同class类下被点击的按钮

• 原有HideClickedButton函数逻辑是遍历所有带buttons类的元素统一切换显隐状态，点击一次就会翻转所有同class按钮的显示状态，必然导致全部按钮同时隐藏/显示
• document.querySelector(".buttons")的匹配规则是返回DOM中第一个符合选择器的元素，所以无论点击哪个按钮，执行这行代码都只会操作第一个匹配到的按钮

针对商品列表每组ADD/Remove按钮联动、不影响其他组状态的需求，核心逻辑是事件触发时直接操作当前点击的按钮，再通过DOM关联关系定位同组按钮，不要全局遍历所有同class元素。

推荐写法（事件委托，适配动态渲染） #

先调整循环渲染的HTML结构，给每组按钮加共同父容器方便定位同组元素，去掉冗余的内联事件绑定：

<!-- 循环生成的单组商品结构，共渲染12组 -->
<div class="product-card">
  <!-- 商品图、标题、价格等其他内容省略 -->
  <div class="btn-group">
    <button class="btn-add" type="button" data-price="${product.price}">ADD</button>
    <button class="btn-remove" type="button" data-price="${product.price}" style="display: none;">Remove</button>
  </div>
</div>

JS逻辑统一用事件委托，动态渲染的元素不需要等渲染完成再单独绑定事件：

document.addEventListener('click', function(e) {
  const clickTarget = e.target
  // 点击ADD按钮的逻辑
  if (clickTarget.matches('.btn-add')) {
    const group = clickTarget.closest('.btn-group')
    // 隐藏当前点击的ADD按钮
    clickTarget.style.display = 'none'
    // 显示同组Remove按钮
    group.querySelector('.btn-remove').style.display = 'block'
    // 执行加购逻辑
    addToCart(clickTarget.dataset.price)
  }
  // 点击Remove按钮的逻辑
  if (clickTarget.matches('.btn-remove')) {
    const group = clickTarget.closest('.btn-group')
    // 隐藏当前点击的Remove按钮
    clickTarget.style.display = 'none'
    // 显示同组ADD按钮
    group.querySelector('.btn-add').style.display = 'block'
    // 执行移除购物车逻辑
    addToCartRemove(clickTarget.dataset.price)
  }
})

兼容原有HTML结构的写法 #

如果不想调整现有HTML结构，直接利用内联事件传入的this参数（指向当前点击按钮）操作即可，不需要全局查找元素：

function hideAddButton(currentAddBtn) {
  // 隐藏当前点击的ADD按钮
  currentAddBtn.style.display = 'none'
  // 按现有DOM结构找同组Remove按钮：ADD父div的下一个兄弟div里的b2按钮
  const removeBtn = currentAddBtn.parentElement.nextElementSibling.querySelector('.b2')
  removeBtn.style.display = 'block'
  // 执行加购逻辑
  addToCart(currentAddBtn.dataset.price)
}

function showRemoveButton(currentRemoveBtn) {
  // 隐藏当前点击的Remove按钮
  currentRemoveBtn.style.display = 'none'
  // 找同组ADD按钮：Remove父div的上一个兄弟div里的b1按钮
  const addBtn = currentRemoveBtn.parentElement.previousElementSibling.querySelector('.b1')
  addBtn.style.display = 'block'
  // 执行移除购物车逻辑
  addToCartRemove(currentRemoveBtn.dataset.price)
}

• 事件回调中通过e.target或者内联事件传入的this，可以直接拿到当前触发点击的DOM元素，不需要全局查询所有同class元素
• closest(选择器)方法可以向上查找最近的符合条件的父元素，是定位同组DOM元素最稳妥的方法，不会串改其他组的状态
• 动态渲染的元素优先用事件委托绑定逻辑，不需要等待渲染完成，也不会出现重复绑定事件的问题

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