如何用jQuery或CSS实现选中列表项移除及切换时恢复原项？

没问题，这个需求用jQuery完全可以搞定！你遇到的核心问题是没做好「已选中项的缓存和恢复」，下面给你一个完整的可运行方案：

1. 基础HTML结构 #

先搭好页面框架，区分「已选中区域」和「待选项列表」：

<div class="selection-container">
  <div class="selected-item">已选中：<span id="current-selected"></span></div>
  <ul class="options-list">
    <li data-value="A">选项A</li>
    <li data-value="B">选项B</li>
    <li data-value="C">选项C</li>
  </ul>
</div>

2. jQuery核心逻辑 #

关键是用一个变量缓存已移除的项，切换时把它放回列表，再处理新选中的项：

$(document).ready(function() {
  // 缓存当前选中的列表项（初始为null，代表无选中项）
  let currentSelectedItem = null;

  // 给所有待选项绑定点击事件
  $('.options-list li').on('click', function() {
    const $clickedItem = $(this);

    // 第一步：如果之前有选中项，把它放回待选列表
    if (currentSelectedItem) {
      $('.options-list').append(currentSelectedItem);
    }

    // 第二步：移除当前点击的项，并存入缓存
    currentSelectedItem = $clickedItem.detach();
    
    // 第三步：更新已选中区域的显示
    $('#current-selected').text($clickedItem.text());
  });
});

核心细节说明： #

• 用detach()代替remove()：detach()会保留元素的事件绑定和数据，放回列表后还能正常触发点击事件，而remove()会清空这些信息
• 变量currentSelectedItem专门用来存被移除的项，切换时直接append回列表即可，不用重新创建元素

3. 可选CSS美化（提升体验） #

加一点样式让交互更直观：

.selection-container {
  margin: 20px;
  font-family: Arial, sans-serif;
}
.selected-item {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.options-list {
  padding-left: 0;
}
.options-list li {
  cursor: pointer;
  padding: 8px 12px;
  margin: 6px 0;
  background-color: #f3f4f6;
  border-radius: 4px;
  list-style: none;
  transition: background-color 0.2s;
}
.options-list li:hover {
  background-color: #e5e7eb;
}

关于CSS能否实现的说明 #

单独用CSS是做不到的哦，因为CSS只能处理样式和简单的状态（比如:hover、:checked），没法实现动态的DOM元素移除、重新添加这类操作，必须依赖JavaScript/jQuery来完成逻辑控制。

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