javascript - 通过javascript删除重复元素

Question

如何使用js去除div中重复的li？

<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的元素在整个文档中应该是唯一的。两个元素不能相同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>