71669


文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。

ご教授よろしくお願いします。

[code]

    <ul>
      <li>
        <h3>
          Jack
        </h3>
        <div>
          I am Jack.
        </div>
      </li>
      <li>
        <h3>
          Smith
        </h3>
        <div>
          I am Smith.
        </div>
      </li>
      <li>
        <h3>
          Tom
        </h3>
        <div>
          I am Tom.
        </div>
      </li>
      <li>
        <h3>
          Jack
        </h3>
        <div>
          I am Jack.
        </div>
      </li>
    </ul>
    
[/code]


CC BY-SA 4.0
2020-11-02T09:31:00.263
71666
2020-11-03T06:47:56.423
2020-11-03T06:47:56.423
32986
42571
question
javascript html css html5
重複があるHTML要素から重複した要素だけを取り除きたい


HTML において要素を (重複を取り除くなどして)
絞り込む場合、その要素周辺へ[クラス](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class)、
[id](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id) や
[カスタムデータ属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)を
**識別子** として割り当て、それを JavaScript
で処理する方法がよく用いられます。今回のように特に[クラス](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class)や
[id
属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id)などが設定されていないときでも、「各要素で共通して存在する一方で、重複していないもの」を識別子として扱うという考え方は変わりません。

今回の場合は、 `li` 要素のテキストが異なるため、これを識別子として用いることが出来ます。次のコードでは要素のテキストを [`textContent`
プロパティ](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent)により取得しました。この部分は適宜書き換えて使用してください。

[code]

    const removeDuplicateItems = () => {
      const childrens = document.querySelectorAll("ul > li");
      const items = new Set();
    
      childrens.forEach(elm => {
        const id = elm.textContent;
        if (!items.has(id)) {
          items.add(id);
        } else {
          elm.remove();
        }
      });
    }
    
    document.querySelector("button").addEventListener("click", removeDuplicateItems, false);
[/code]

[code]

    button {
      position: fixed;
      top: 50px;
      right: 50px;
    }
[/code]

[code]

    <button type="button">重複を削除する</button>
    <ul>
      <li>
        <h3>
          Jack
        </h3>
        <div>
          I am Jack.
        </div>
      </li>
      <li>
        <h3>
          Smith
        </h3>
        <div>
          I am Smith.
        </div>
      </li>
      <li>
        <h3>
          Tom
        </h3>
        <div>
          I am Tom.
        </div>
      </li>
      <li>
        <h3>
          Jack
        </h3>
        <div>
          I am Jack.
        </div>
      </li>
    </ul>
[/code]


CC BY-SA 4.0
2020-11-02T10:13:38.960
71669
2020-11-02T10:13:38.960
32986
71666
answer