在JavaScript中实现点击按钮关闭上一个元素，核心是先定位到按钮的上一个相邻元素，再根据业务需求选择隐藏或者移除该元素，下面分别介绍两种常用的实现方案。
方案一：修改样式隐藏上一个元素
如果后续可能还需要重新显示该元素，可以选择修改元素的style_display属性为none来隐藏元素，这种方式不会从DOM树中删除元素。
实现步骤
- 给按钮绑定点击事件监听器
- 在点击事件回调中，通过按钮的
previousElementSibling属性获取上一个相邻元素 - 将获取到的元素的
style.display设置为none
代码示例
<!-- HTML结构 -->
<div class="target">这是需要关闭的目标元素</div>
<button class="close-btn">点击关闭上一个元素</button>
<script>
// 获取按钮元素
const closeBtn = document.querySelector('.close-btn');
// 绑定点击事件
closeBtn.addEventListener('click', function() {
// 获取按钮的上一个相邻元素
const prevElement = this.previousElementSibling;
// 判断元素是否存在，避免报错
if (prevElement) {
// 隐藏元素
prevElement.style.display = 'none';
}
});
</script>
方案二：直接从DOM树中移除上一个元素
如果确定该元素后续不再需要使用，可以直接将其从DOM树中移除，这种方式会彻底删除元素，释放相关资源。
实现步骤
- 给按钮绑定点击事件监听器
- 获取按钮的上一个相邻元素，同时获取该元素的父元素
- 调用父元素的
removeChild方法，传入目标元素完成移除
代码示例
<!-- HTML结构 -->
<div class="target">这是需要移除的目标元素</div>
<button class="close-btn">点击移除上一个元素</button>
<script>
// 获取按钮元素
const closeBtn = document.querySelector('.close-btn');
// 绑定点击事件
closeBtn.addEventListener('click', function() {
// 获取按钮的上一个相邻元素
const prevElement = this.previousElementSibling;
// 判断元素是否存在，避免报错
if (prevElement) {
// 获取父元素并移除目标元素
prevElement.parentNode.removeChild(prevElement);
}
});
</script>
注意事项
在实际开发中需要注意几个问题，首先是previousElementSibling获取的是上一个相邻的元素节点，如果按钮和上一个元素之间存在文本节点或者注释节点，这个属性会返回null，此时可以改用previousSibling遍历节点，筛选出元素节点。
其次在操作元素之前一定要先判断目标元素是否存在，避免因为元素不存在导致代码报错。另外如果页面中有多个相同的按钮和元素结构，需要给每个按钮单独绑定事件，或者使用事件委托的方式处理，避免事件冲突。
如果元素的隐藏和显示需要切换，可以结合当前的style.display值做判断，比如当前是none就设置为block，否则设置为none，实现切换效果。
JavaScriptclick_eventprevious_elementremoveChildstyle_display修改时间：2026-07-10 19:27:26