通过javascript删除重复元素

Question

如何删除重复的李在的div使用JS？

<div id="tags">  
  <li id="tag">sport</li>
  <li id="tag">news</li>  
  <li id="tag">sport</li>        
  <li id="tag">sport</li>    
  <li id="tag">cars</li>
</div>  

必须变成：

运动

消息

汽车

Answer 1

您可以按以下步骤执行此操作：

• 选择所有元素并创建Set包含所有文本的<li>
• 然后使用循环遍历元素列表 forEach
• 检查是否Set不包含innerHTML当前元素，然后删除该元素
• 如果 set 包含文本，则不要删除该元素，而是从中删除文本 Set

注意： id of 元素在整个文档中应该是唯一的。两个元素不能相同id

const tags = [...document.querySelectorAll('#tags > li')];
const texts = new Set(tags.map(x => x.innerHTML));
tags.forEach(tag => {
  if(texts.has(tag.innerHTML)){
    texts.delete(tag.innerHTML);
  }
  else{
    tag.remove()
  }
})

<div id="tags">  
  <li>sport</li>
  <li>news</li>  
  <li>sport</li>        
  <li>sport</li>    
  <li>cars</li>
</div>