如何在 Javascript 中删除父节点中重复的 childNode 元素？

Question

如何从父元素中删除任何重复的子节点，以便父元素中具有相同 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>

Answer 1

尝试这个。

var children = document.querySelectorAll(".child")

var tmpTexts = []

for (const c of children) {

    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>

Answer 2

这是另一种方法：

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>