如何在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>