点击删除Pill badges及Bootstrap 5添加右上角关闭叉号实现咨询

一、给Pill Badge添加右上角关闭叉号 #

Bootstrap 5没有原生自带关闭按钮的pill徽章组件，但你已经引入了Bootstrap Icons，可以非常方便的自定义实现，不需要额外依赖。

二、实现点击删除功能 #

因为是动态生成的元素，需要用jQuery事件委托的方式绑定删除事件，避免直接绑定到动态元素上无效。

具体修改步骤 #

1. 修改添加徽章的JS逻辑
   把你原来的$("#listBtn").click回调里的append内容替换为带关闭图标的结构，还可以加个空值判断避免添加空白标签：

$("#listBtn").click(function() {
  let txt = $('#fruits').val();
  if(txt.trim() === '') return;
  $("#symbolPicks").append(`
    <span class="badge rounded-pill bg-secondary d-inline-flex align-items-center gap-1 me-1 mb-1">
      ${txt}
      <span class="remove-pill bi bi-x-circle-fill fs-6 cursor-pointer"></span>
    </span>
  `);
  $("#fruits").val("");
});

这里用到的d-inline-flex、align-items-center、gap-1都是Bootstrap 5自带的工具类，不需要额外写复杂的自定义样式就能实现内容和关闭按钮对齐、留间距的效果。

2. 新增删除事件绑定
   在你的JS代码末尾添加事件委托逻辑，绑定到固定存在的父元素#symbolPicks上即可适配动态生成的元素：

// 点击关闭按钮删除对应徽章
$('#symbolPicks').on('click', '.remove-pill', function() {
  $(this).closest('.badge').remove();
});

// 如果需要点击整个徽章就删除，替换为下面这段即可
// $('#symbolPicks').on('click', '.badge', function() {
//   $(this).remove();
// });

3. 可选样式优化
   如果需要调整关闭按钮的交互效果，可以加少量自定义CSS：

.remove-pill {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.remove-pill:hover {
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者Carol.Kar