删除所有元素，但使用 jQuery 保留 1 个元素，数据 id = x?

Question

要把这个问题说清楚，唯一的办法就是举个例子。

我的 HTML 页面上有一个元素列表。每个元素都有自己的data-id，并且有一些重复的值。

我需要使用 jQuery 删除所有元素，但保留 1 个具有data-id= x的元素。x是data-id=…的数量。

所以例如：

我有data-id="44444"

我需要从我的页面中删除所有元素(包括重复的元素(，但保留 1 个具有data-id="44444"的元素

这是我到目前为止所拥有的：

	  var seen = {};
		$('.myLi').each(function() {
		var dataId = $(this).attr('data-id');
		if (seen[dataId])
$(this).remove();
		else
seen[dataId] = true;
		});

<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>

我当前的代码只删除了重复的元素，但我不知道如何删除/删除所有元素并保留带有data-id="44444"的元素。

有人可以就此提出建议吗？

提前谢谢。

Answer 1

// Get rid of all data-ids you do not want
$('.myLi').not('[data-id="44444"]').remove();
// Clean up the extras
$('.myLi').each((n, el) => {
if (n > 0) {
$(el).remove();
}
});

<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>

Answer 2

编辑：我终于认为 2 行比循环函数更好、更容易理解:)

根据您的实际逻辑：

• 我使用parseInt来操作函数中的整数(因为有 data 属性转换为字符串(

• 我遍历每个li，如果不是正确的，或者如果我们已经保留了第一个，请将其删除。

var keep = function (keepId) {
// remove all with wrong ID
$('.myLi').not('[data-id="' + keepId + '"]').remove();

// only keep first one if there are many
$('.myLi').not(':eq(0)').remove();
}
keep(44444)

<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>

Answer 3

找到所有的lis。 然后，对于每个元素，找到具有相同数据 id 的所有 li，并获取不是该数据 id 中第一个的 li，然后删除它们。

var $lis = $('.myLi');
$lis.filter(function(){
return !$lis.filter(`[data-id="${this.dataset.id}"]`).first().is(this);
}).remove();

<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 1</li>
<li data-device-id="44444" class="myLi" data-id="44444">44444 2</li>
<li data-device-id="4234" class="myLi" data-id="4234">4234 1</li>
<li data-device-id="4234" class="myLi" data-id="4234">4234 2</li>
<li data-device-id="476444" class="myLi" data-id="476444">476444</li>
</ul>

或者如果我误会了，你只想要一个李。

var $lis = $('.myLi');
$lis.not($lis.filter('[data-id="44444"]').first()).remove();

<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 1</li>
<li data-device-id="44444" class="myLi" data-id="44444">44444 2</li>
<li data-device-id="4234" class="myLi" data-id="4234">4234 1</li>
<li data-device-id="4234" class="myLi" data-id="4234">4234 2</li>
<li data-device-id="476444" class="myLi" data-id="476444">476444</li>
</ul>