点击Bootstrap的btn-danger类按钮时如何隐藏整个reply-box回复框

问题根因 #

• 原代码中取消按钮没有设置id，getElementById('btn btn-danger')是错误写法，btn btn-danger是类名而非id，无法正确获取到取消按钮元素，原绑定的点击事件本身就不会生效
• 原隐藏逻辑仅针对card-body元素，没有操作外层的reply-box容器

修改步骤 #

1. 修改HTML代码：给取消按钮添加id属性，同时修正原代码中类名属性的引号闭合错误

<button class="btn" id="reply-button">Răspunde</button>
<div id="reply-box" class="card" style="display: none">
    <div class="card-body">
        <textarea class="form-control"></textarea>
        <br>
        <div class="form-group">
            <button class="btn btn-primary">Postează răspunsul</button>
            <!-- 给取消按钮新增id -->
            <button class="btn btn-danger" id="cancel-reply">Renunță</button>
        </div>
    </div>
</div>

2. 修改JS代码：修正取消按钮的获取逻辑，调整隐藏目标为整个reply-box容器

let btn = document.getElementById('reply-button');
let replybox = document.getElementById('reply-box');
// 用新增的id获取取消按钮
let cancel = document.getElementById('cancel-reply');

btn.onclick = function() {
  // 这里用block比contents更符合块级元素默认显示逻辑，也可根据需求保留contents
  replybox.style.display = "block";
}
cancel.onclick = function() {
  // 直接隐藏整个回复框容器
  replybox.style.display = "none";
}

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