【jQuery】filterを使って重複する要素を削除する

今回はhtml要素のなかで重複している要素を削除する方法について紹介していきたいと思います。

filterとremoveを使って重複した要素を削除する

たとえば下記のようなhtmlがあるとします。

<div class="inner">
  <div class="item"><label>abcde</label></div>
  <div class="item"><label>abcde</label></div>
  <div class="item"><label>アイテム1</label></div>
  <div class="item"><label>コーヒー</label></div>
  <div class="item"><label>プレゼント</label></div>
  <div class="item"><label>アイテム2</label></div>
</div>

htmlを見ると「abcde」が重複していますね。

重複した要素を削除したいと思います。

jQuery

jQuery('.item').filter(
    function() {
        const txt = jQuery(this).text();
        return this !== jQuery(`.item:contains('${txt}')`).get(0);
    }
).remove();

結果

abcde
アイテム1
コーヒー
プレゼント
アイテム2

これで重複している要素を削除することができました。