如何在Blazor中创建带有侧边小型删除按钮的简单列表？

直接用Bootstrap的列表组组件配合flex布局，就能实现你要的每个列表项旁带删除按钮的效果，以下是完整实现代码：

<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container mt-4">
  <ul class="list-group" id="itemList">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      列表项内容1
      <button type="button" class="btn btn-danger btn-sm delete-btn">删除</button>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      列表项内容2
      <button type="button" class="btn btn-danger btn-sm delete-btn">删除</button>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      列表项内容3
      <button type="button" class="btn btn-danger btn-sm delete-btn">删除</button>
    </li>
  </ul>
</div>

<!-- 引入Bootstrap JS实现交互 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 绑定删除按钮点击事件
  document.querySelectorAll('.delete-btn').forEach(button => {
    button.addEventListener('click', () => {
      button.closest('.list-group-item').remove();
    });
  });
</script>

核心细节： #

• 用Bootstrap的list-group和list-group-item构建基础列表样式，替代原生ul/li的默认样式，解决你之前用原生标签达不到理想效果的问题
• d-flex justify-content-between align-items-center是Bootstrap的flex工具类，让列表项内的内容与删除按钮自动左右分布、垂直居中
• btn btn-danger btn-sm是Bootstrap预设的小型危险按钮样式，适配列表的视觉比例
• 附加的JS代码实现点击删除按钮时移除对应列表项的功能，无需额外第三方组件包

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