带删除按钮的下拉列表：求实现可移除列表项的组件方案

一、原生HTML+JavaScript实现 #

完全自定义，不依赖任何框架，灵活性拉满，代码直接就能用：

<!-- 下拉组件容器 -->
<div class="custom-dropdown">
  <button class="dropdown-toggle" onclick="toggleDropdown()">已选项目</button>
  <div class="dropdown-menu" id="dropdownMenu">
    <!-- 列表项示例 -->
    <div class="dropdown-item">
      <span>项目1</span>
      <button class="delete-btn" onclick="removeItem(this)">×</button>
    </div>
    <div class="dropdown-item">
      <span>项目2</span>
      <button class="delete-btn" onclick="removeItem(this)">×</button>
    </div>
  </div>
</div>

<style>
.custom-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-top: 4px;
  display: none;
}

.dropdown-item {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.delete-btn {
  background: transparent;
  border: none;
  color: #dc3545;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}

.delete-btn:hover {
  color: #c82333;
}
</style>

<script>
// 切换下拉菜单显示/隐藏
function toggleDropdown() {
  const menu = document.getElementById('dropdownMenu');
  menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}

// 删除对应列表项
function removeItem(btn) {
  const item = btn.parentElement;
  item.remove();
  // 可选：删除后菜单为空时，可以加逻辑隐藏菜单或修改按钮文本
}

// 点击外部关闭下拉菜单
document.addEventListener('click', function(e) {
  const dropdown = document.querySelector('.custom-dropdown');
  if (!dropdown.contains(e.target)) {
    document.getElementById('dropdownMenu').style.display = 'none';
  }
});
</script>

二、基于Bootstrap自定义下拉组件 #

复用Bootstrap的样式和交互逻辑，不用自己写基础样式，只需要加删除按钮和删除逻辑：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    已选项目
  </button>
  <ul class="dropdown-menu" style="min-width: 200px;">
    <li class="dropdown-item d-flex justify-content-between align-items-center">
      <span>项目A</span>
      <button class="btn btn-link p-0 text-danger" onclick="removeBootstrapItem(this)">×</button>
    </li>
    <li class="dropdown-item d-flex justify-content-between align-items-center">
      <span>项目B</span>
      <button class="btn btn-link p-0 text-danger" onclick="removeBootstrapItem(this)">×</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function removeBootstrapItem(btn) {
  const listItem = btn.closest('li');
  listItem.remove();
  // 可选：菜单空了之后更新按钮文本
  const menu = btn.closest('.dropdown-menu');
  if (menu.children.length === 0) {
    document.querySelector('.dropdown-toggle').textContent = '暂无项目';
  }
}
</script>

核心逻辑说明 #

• 列表项用flex布局，让文本和删除按钮自动分两边，布局更规整
• 删除按钮通过定位父元素找到要删除的项，调用remove()直接移除
• 原生实现需要自己加点击外部关闭菜单的逻辑，Bootstrap已经自带这个功能

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