如何通过类名一键隐藏按钮（不使用元素ID）

你的代码有三个关键问题导致无法正常运行：

• getElementsByClassName的参数不需要加.，该方法接收的是纯类名字符串，而非CSS选择器语法，所以应该传'visible'而不是'.visible'。
• getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM元素，不能直接调用addEventListener，需要通过索引（比如[0]）获取集合里的具体元素。
• 事件回调里的input指向的是整个元素集合，无法直接设置样式，应该用this指代当前被点击的按钮元素。

修复后的代码 #

<input type="button" value="Click" class="visible">
<script>
// 获取第一个类名为visible的元素
const input = document.getElementsByClassName('visible')[0];

input.addEventListener('click', function(){
   // 隐藏当前点击的按钮
   this.style.display = 'none';
});
</script>

更简洁的替代方案（使用querySelector） #

如果觉得类数组操作麻烦，可以用querySelector，它支持CSS选择器语法，直接返回第一个匹配的元素：

<input type="button" value="Click" class="visible">
<script>
const input = document.querySelector('.visible');

input.addEventListener('click', function(){
   this.style.display = 'none';
});
</script>

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