通过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注意：&nbsp;id&nbsp;of元素在整个文档中应该是唯一的。两个元素不能相同idconst tags = [...document.querySelectorAll('#tags > li')];const texts = new Set(tags.map(x => x.innerHTML));tags.forEach(tag => {&nbsp; if(texts.has(tag.innerHTML)){&nbsp; &nbsp; texts.delete(tag.innerHTML);&nbsp; }&nbsp; else{&nbsp; &nbsp; tag.remove()&nbsp; }})<div id="tags">&nbsp;&nbsp;&nbsp; <li>sport</li>&nbsp; <li>news</li>&nbsp;&nbsp;&nbsp; <li>sport</li>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <li>sport</li>&nbsp; &nbsp;&nbsp;&nbsp; <li>cars</li></div>&nbsp;&nbsp;

Answer 2

您可以使用一个循环迭代选定的节点列表，而无需太多开销，如下所示：let elements = document.querySelectorAll("li");textArr = [];elements.forEach(function(d, i) {&nbsp; if(textArr.indexOf(d.innerText) > -1) {&nbsp; &nbsp; d.remove();&nbsp; }&nbsp; else {&nbsp; &nbsp; textArr.push(d.innerText);&nbsp; }});<div id="tags">&nbsp;&nbsp;&nbsp; <li id="tag">sport</li>&nbsp; <li id="tag">news</li>&nbsp;&nbsp;&nbsp; <li id="tag">sport</li>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <li id="tag">sport</li>&nbsp; &nbsp;&nbsp;&nbsp; <li id="tag">cars</li></div>