Bootstrap 5.1.3环境下段落元素关闭按钮失效问题求助

我在网站中用<p>标签嵌入了一组公告，想实现用户关闭公告的功能，但当前代码没法隐藏对应的段落元素。我用的是Bootstrap 5.1.3版本和jQuery，代码如下：

当前代码 #

JavaScript #

function closeNote(button) {
  var note = button.parentNode;
  note.style.display = 'none';
}

CSS #

.note {
  position: relative;
  display: inline-block;
  padding-right: 30px;
  /* Add space for the button */
}

.note .close-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

.note .close-button i {
  color: #999;
  font-size: 20px;
}

.note .close-button:hover i {
  color: #000;
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<p class="note notesbonus">
  <i class="bi bi-patch-plus-fill"></i> Note 1
  <button class="close-button" onclick="closeNote(this)">
      <i class="bi bi-x"></i>x
  </button>
</p>

<p class="note otherclass"> <i class="bi bi-patch-plus-fill"></i> Note 2 <button class="close-button" onclick="closeNote(this)">
      <i class="bi bi-x"></i>x
  </button>
</p>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

问题分析 #

你的代码里有几个关键问题导致关闭功能失效：

• Bootstrap图标库未引入：你用了bi bi-patch-plus-fill和bi bi-x这些Bootstrap图标类，但没引入Bootstrap Icons的CSS文件，图标加载失败可能导致按钮点击区域异常，甚至浏览器渲染出问题。
• 版本不匹配：你说用的是Bootstrap 5.1.3，但代码里引入的是5.3.2版本的文件，版本不一致可能引发样式或JS冲突。
• 原生DOM操作的潜在问题：button.parentNode可能因为HTML里的空格、换行生成的文本节点，导致无法准确获取到<p>标签；另外你提到用了jQuery，却用原生JS写逻辑，没必要且容易出兼容问题。

修复方案 #

1. 引入Bootstrap Icons CSS #

在<head>里添加图标库引用，确保图标正常加载：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

2. 统一Bootstrap版本 #

把引入的Bootstrap文件换成你实际使用的5.1.3版本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

3. 用jQuery实现可靠的关闭逻辑 #

既然用了jQuery，换成jQuery写法可以避免原生DOM的节点问题，同时更简洁：

$(document).ready(function() {
  $('.close-button').on('click', function() {
    $(this).closest('.note').hide();
  });
});

同时去掉HTML里的onclick属性，避免内联事件的潜在问题：

<button class="close-button">
  <i class="bi bi-x"></i>
</button>

4. 优化按钮点击体验 #

去掉按钮里多余的x字符，仅保留图标，同时给按钮加内边距扩大点击区域：

.note .close-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px; /* 增加点击区域 */
}

修复后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
.note {
  position: relative;
  display: inline-block;
  padding-right: 30px;
  margin: 10px 0; /* 增加间距更美观 */
}

.note .close-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.note .close-button i {
  color: #999;
  font-size: 20px;
}

.note .close-button:hover i {
  color: #000;
}
</style>

<p class="note notesbonus">
  <i class="bi bi-patch-plus-fill"></i> Note 1
  <button class="close-button">
    <i class="bi bi-x"></i>
  </button>
</p>

<p class="note otherclass"> 
  <i class="bi bi-patch-plus-fill"></i> Note 2 
  <button class="close-button">
    <i class="bi bi-x"></i>
  </button>
</p>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  $('.close-button').on('click', function() {
    $(this).closest('.note').hide();
  });
});
</script>

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