如何使用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> 必須成為：運動消息汽車
2 回答
侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
您可以按照以下步驟進行操作：
選擇所有元素并創建
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>
慕尼黑的夜晚無繁華
TA貢獻1864條經驗 獲得超6個贊
您可以使用一個循環迭代選定的節點列表，而無需太多開銷，如下所示：
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>
- 2 回答
- 0 關注
- 232 瀏覽
添加回答
舉報
0/150
提交
取消