удалить дубликаты элементов через javascript - PullRequest
Новая
       2

удалить дубликаты элементов через javascript

4 голосов
/ 05 марта 2020

как удалить дубликаты li в 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>

должно стать:

sport новости автомобили

Ответы [ 2 ]

6 голосов
/ 05 марта 2020

Вы можете сделать это в следующих шагах:

  • Выберите все элементы и создайте Set, содержащий все тексты <li>
  • Затем l oop через элементы список с использованием 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>
3 голосов
/ 05 марта 2020

Вы можете просто перебрать выбранный список узлов без особых затрат, используя один l oop, например: 

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