javascript - 删除重复的 DOM 元素(Javascript 不是 jQuery)

Question

我有一个包含一些重复元素的列表，我需要删除重复:

在这种情况下，我需要删除两个最新的元素，因为它们与第一个元素相同:

<ul class="list"> 
        <li class="list-item" data-id="5">5</li> 
        <li class="list-item" data-id="4">4</li> 
        <li class="list-item" data-id="5">5</li> 
        <li class="list-item" data-id="5">5</li> 
</ul> 

我需要这样的结果(仅具有唯一值的元素):

<ul class="list"> 
        <li class="list-item" data-id="5">5</li> 
        <li class="list-item" data-id="4">4</li> 
</ul> 

Answer 1

可能最简单的方法是循环遍历所有列表元素，同时跟踪到目前为止看到的所有 ID，并删除您之前已经看到过其 ID 的任何元素:

function removeDupes() {
  const seenIDs = {};
  for (const item of document.querySelectorAll('#mylist > .list-item')) {
      if (seenIDs[item.dataset.id]) item.parentNode.removeChild(item);
      else seenIDs[item.dataset.id] = true;
  }
}

<ul class="list" id="mylist"> 
        <li class="list-item" data-id="5">5</li> 
        <li class="list-item" data-id="4">4</li> 
        <li class="list-item" data-id="5">5</li> 
        <li class="list-item" data-id="5">5</li> 
</ul>
<button onclick="removeDupes()">Remove duplicates</button>