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

您可以使用一个循环迭代选定的节点列表，而无需太多开销，如下所示：

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>