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

＆＃13;

// 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();
  }
});

＆＃13;

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

＆＃13;

Answer 2

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

根据您的实际逻辑：

我使用parseInt来操作函数中的int（因为按数据属性将字符串转换为字符串）
我循环遍历每个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。然后对于每个元素，找到具有相同data-id的所有lis，并获取那些不是第一个data-id的lis，然后删除它们。

＆＃13;

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

＆＃13;

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

＆＃13;

或者，如果我误解了，你只想单身。

＆＃13;

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

＆＃13;

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

＆＃13;

删除所有元素但使用jQuery保留1个元素和data-id = x？

3 个答案: