通过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中删除文本

注：

元素的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>  

Answer 2

您可以使用一个循环来遍历所选节点列表而无需太多开销，如下所示：