如何解决如何在Javascript的父级中删除重复的childNode元素?
如何从父元素中删除任何重复的childNodes,以使父元素中具有相同innerText的元素不超过1个?下面的HTML示例说明了之前和之后的含义。
HTML
<div id="parent">
<div class="child">hello</div>
<div class="child">hello</div>
<div class="child">world</div>
<div class="child">world</div>
</div>
目标
<div id="parent">
<div class="child">hello</div>
<div class="child">world</div>
</div>
解决方法
尝试一下。
var childs = document.querySelectorAll(".child")
var tmpTexts = []
for (const c of childs) {
if (tmpTexts.includes(c.innerText)) continue
tmpTexts.push(c.innerText)
c.parentNode.removeChild(c)
}
<div id="parent">
<div class="child">hello</div>
<div class="child">hello</div>
<div class="child">world</div>
<div class="child">world</div>
</div>
,
这是另一种方法:
const children = document.querySelectorAll('.child');
function filterChildren(text,i,textArray) {
if ( textArray.indexOf(text) <= textArray.lastIndexOf(text) && textArray.indexOf(text) !== i ) {
children[i].parentNode.removeChild( children[i] )
}
}
Array
.from(children)
.map( child => child.innerHTML )
.forEach(filterChildren);
<div id="parent">
<div class="child">hello</div>
<div class="child">hello</div>
<div class="child">world</div>
<div class="child">world</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。