如何使用jQuery删除所有元素，仅保留一个指定data-id的元素？

嘿，我懂你的需求了——你不是要给每个重复的data-id做去重，而是要彻底移除所有元素，只留下一个data-id为指定值（比如44444）的元素。你的现有代码是给每个data-id保留一个实例，但这和你要的效果不一样，咱们来调整一下：

实现思路 #

1. 先明确你要保留的目标data-id值
2. 分两步处理：
   • 第一步：移除所有data-id不等于目标值的元素
   • 第二步：在剩下的同目标id元素里，只保留第一个，移除其他重复项

完整代码示例 #

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="deviceList" class="deviceList">
  <li data-device-id="44444" class="myLi" data-id="44444">44444</li>
  <li data-device-id="44444" class="myLi" data-id="44444">44444</li>
  <li data-device-id="4234" class="myLi" data-id="4234">4234</li>
  <li data-device-id="4234" class="myLi" data-id="4234">4234</li>
  <li data-device-id="476444" class="myLi" data-id="476444">476444</li>
</ul>

jQuery代码

// 定义你要保留的目标data-id
const targetId = '44444';

// 第一步：移除所有data-id不等于目标值的元素
$('.myLi[data-id!="' + targetId + '"]').remove();

// 第二步：在剩下的同id元素中，只保留第一个，移除其他
$('.myLi[data-id="' + targetId + '"]:not(:first)').remove();

代码解释 #

• 第一步用属性选择器[data-id!="' + targetId + '"]精准选中所有非目标id的元素，直接移除
• 第二步用:not(:first)筛选出目标id元素中除了第一个之外的所有项，然后移除
• 如果你不在乎保留哪一个目标id的元素，也可以用:gt(0)（索引大于0的元素）来代替:not(:first)，效果完全一致

简化版代码 #

如果你想把两步合并成一行，也可以这么写，逻辑更简洁：

const targetId = '44444';
$('.myLi').not('[data-id="' + targetId + '"]:first').remove();

这里用.not()方法排除掉“目标id的第一个元素”，剩下的全部移除，一步到位实现需求。

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