如何实现onclick点击触发时移除按钮自身的功能

现有代码问题 #

• 方法拼写错误：document.getElementsById 多了冗余的s，id为页面唯一标识，正确方法名为单数形式document.getElementById
• id大小写不匹配：HTML中div的id属性为hideButton（大写B），JS中查询时写为hidebutton（小写b），DOM查询对id大小写敏感，无法匹配到对应元素
• 逻辑与需求不符：button1类绑定在<a>标签上，你现有代码是选中外层div后移除div的类，既达不到修改按钮样式的效果，也无法移除按钮元素本身

最简解决方案 #

直接在触发点击事件时把当前元素作为参数传入函数，不需要额外查询DOM，不易出错：

HTML代码

<div id="hideButton">
    <a onclick="removeButton(this)" class="button1">PRESS</a>
</div>

场景1：点击后直接删除按钮元素自身

function removeButton(btn) {
    btn.remove();
}

如果需要连外层的hideButton div一起删除，替换为：

function removeButton(btn) {
    btn.parentElement.remove();
}

场景2：仅移除按钮的button1样式类，保留元素

function removeButton(btn) {
    btn.classList.remove("button1");
}

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