如何使用js刪除div中重復(fù)的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> 必須成為：運(yùn)動(dòng)消息汽車
2 回答
侃侃爾雅
TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個(gè)贊
您可以按照以下步驟進(jìn)行操作：
選擇所有元素并創(chuàng)建
Set包含所有文本的<li>然后使用循環(huán)遍歷元素列表
forEach檢查是否
Set不包含innerHTML當(dāng)前元素，然后刪除該元素如果 set 包含文本，則不要?jiǎng)h除該元素，而是刪除其中的文本
Set
注意： id of元素在整個(gè)文檔中應(yīng)該是唯一的。兩個(gè)元素不能相同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>
慕尼黑的夜晚無(wú)繁華
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以使用一個(gè)循環(huán)迭代選定的節(jié)點(diǎn)列表，而無(wú)需太多開(kāi)銷，如下所示：
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 關(guān)注
- 245 瀏覽
添加回答
舉報(bào)
0/150
提交
取消