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

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]

document.querySelectorAll('.top > .nick').forEach(function(n) {
  const text = n.textContent;
  !this.has(text) && this.add(text) || n.remove();
}, new Set);

или

[...document.querySelector('.top').children].reduce((acc, n) => {
  const text = n.innerText;
  acc.includes(text) ? n.parentNode.removeChild(n) : acc.push(text);
  return acc;
}, []);

или

Object
  .values(Array
    .from(document.querySelectorAll('.top > .nick'))
    .reduce((acc, n) => ((acc[n.innerText] ??= []).push(n), acc), {}))
  .forEach(n => n.forEach((m, i) => i && (m.outerHTML = '')));

или

const el = document.querySelector('.top');
el.innerHTML = [...new Set(el.innerHTML.match(/<span.*?\/span>/g) ?? [])].join(' ');

или

const el = document.querySelector('.top');
el.innerHTML = Array
  .from(el.getElementsByClassName('nick'), n => n.innerText)
  .filter((n, i, a) => i === a.indexOf(n))
  .reduce((acc, n) => acc + (acc && ' ') + `<span class="nick">${n}</span>`, '');