Блог

Главная - Вопросы по программированию - Как удалить повторяющиеся элементы дочернего узла внутри родительского узла в Javascript?

Как удалить повторяющиеся элементы дочернего узла внутри родительского узла в Javascript?

#javascript #html #foreach

#javascript #HTML #foreach

Вопрос:

Как удалить все повторяющиеся дочерние узлы из родительского элемента, чтобы в родительском элементе никогда не было более 1 элемента с одинаковым внутренним текстом? Приведенный ниже HTML-пример того, что такое before и предполагаемое after .

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>

Комментарии:

1. Можете ли вы заполнить свою попытку? Вам не так много, чтобы помочь, если мы не можем увидеть, что вы на самом деле пытались до сих пор.

2. Хотя я бы не стал изменять массив из его собственного forEach обработчика. Представьте, что может произойти, если вы удалите элемент во время итерации по нему? Вы можете попробовать другой встроенный массив filter , который может быть больше для вашего варианта использования.

Ответ №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>

Ответ №2:

Вот еще один способ сделать это:

 const children = document.querySelectorAll('.child');

function filterChildren(text, i, textArray) {
  if ( textArray.indexOf(text) <= textArray.lastIndexOf(text) amp;amp; 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>