remove duplicate elements through javascript

Question

how to remove duplicate li in div using 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>  

must become:

sport

news

cars

Answer 1

You can do that in following steps:

• Select all the elements and create Set containing all the texts of <li>
• Then loop through elements list using forEach
• Check if the Set doesn't contain the innerHTML of current element then remove the element
• If set contains the text then don't remove the element but remove the text from Set

Note: id of element should be unique in the whole document. Two elements can't have same 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

you can just iterate over the selected node list without much overhead using one loop, like this:

let elements = document.querySelectorAll("li");
textArr = [];
elements.forEach(function(d, i) {
  if(textArr.indexOf(d.innerText) > -1) {
    d.remove();
  }
  else {
    textArr.push(d.innerText);
  }
});

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