Как удалить одинаковые элементы но оставить один из них?

Question

[ICE777]

В одной браузерной игре есть баг он заключается в следующим ник игрока дублируется и засоряет топ, насколько я знаю это исключительно визуальный баг (то-есть в игре нету 10 игроков с таким же ником он исключительно в топе).

Как сделать чтоб убирало все дубликаты но при том чтоб ставился один ник?

<div class="top">
    <span class="nick">Jack</span> <!-- Допустим оригинал-->
    <span class="nick">Jack</span>
    <span class="nick">Jack</span>
    <span class="nick">Jack</span>
    <span class="nick">Mike</span>
</div>

Хотелось бы узнать как это сделать без использования JQuery, на чистом JS.

Comments

[Andrew]

Конечно, можно искать в innerHTML строку и заменять, но не проще поправить данные, которые приходят и заполняются таким образом?(массив значений, обьекты и т.п)
Это как у вас дома течёт чистая вода и туда начало попадать говнецо из соседней трубы, вы вместо того чтоб починить источник, начинаете на выходе её фильтровать.

[AntonSidorenko]

Но если очень хочется, то можно, к примеру, пройтись по всем ним, по пути записывая в массив элемент с индексом равным innerHtml и удаляя из Dom. После пройтись по получившемуся массиву, создавая из его элементов новые элементы Dom.

[ICE777]

Andrew, это не моя игра. Нужно внимательней вопрос читать если бы это была моя игра я бы указал как исправить проблему а не её симптом. Я не виноват что разрабы не фиксят этот баг приходится как-то самому (иногда может быть и 25+ такого дерьма) но я с такими проблемами еще не сталкивался и потому задал вопрос.

Answer 1

[0xD34F]

О каких элементах идёт речь:

const parent = document.querySelector('.top');
const elements = parent.children;

Удаляем:

parent.replaceChildren(...Array.prototype.filter.call(
  elements,
  function({ textContent: n }) {
    return !this.has(n) && this.add(n);
  },
  new Set
));

или

const { size: numUnique } = Array.prototype.reduce.call(
  elements,
  (acc, n) => acc.add(elements[acc.size].innerText = n.innerText),
  new Set
);

for (; elements[numUnique]; parent.lastElementChild.remove()) ;

или

parent.innerHTML = Array
  .from(new Set(Array.from(elements, n => n.outerHTML)))
  .join('');

или

Object
  .values(Array
    .from(elements)
    .reduce((acc, n) => ((acc[n.innerText] ??= []).push(n), acc), {}))
  .forEach(n => n.forEach((m, i) => i && parent.removeChild(m)));

или

[...elements]
  .filter((n, i, a) => n !== a.find(m => m.innerText === n.innerText))
  .forEach(n => n.replaceWith());