重複するHTML要素をjQueryで削除するには

Question

<div class="posts">
  <div class="post">こんにちは</div>
  <div class="post">こんにちは</div>
  <div class="post">こんにちは</div>
  <div class="post">Hello</div>
  <div class="post">よろしく<div>
  <div class="post">こんばんは<div>
</div>

div内にある重複している要素（<div class="post">こんにちは</div>）をjQueryで削除して下記のようにしたいです。

<div class="posts">
  <div class="post">こんにちは</div>
  <div class="post">Hello</div>
  <div class="post">よろしく<div>
  <div class="post">こんばんは<div>
</div>

重複しているHTMLを取得して削除する方法について調べてもよくわかりませんでした。

Answer 1

こんにちは
以下、追記も含め、３つの回答コードを挙げます。

回答コード その1

$('.post') の中で削除の対象になるものを filter で抽出して remove すればよいので、たとえば以下で出来ます。

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

• **動作確認用 CodePen: ** https://codepen.io/jun68ykt/pen/OJLdyjm?editors=1011

ただし、上記のコードでは、 filter に与える関数の中で、

$(`.post:contains('${t}')`).get(0) 

を実行して、あるテキストを含む１個以上の<div class="post"> の中で、最初の要素を filterによるループの毎回、取ってきており、その点では無駄なことをやっています。この無駄を省くとすれば、filter によるループにおいて出現するテキストを順次どこかに保存していき、そこに既に入っているテキストを持つ <div> が見つかったら、それを削除対象としてfilterで残るようにします。以下は、この考えをもとに、保存場所として Set を使う例です。

回答コード その2

const set = new Set();
  
$('.post').filter(
    function() {
        const t = $(this).text();
        if (set.has(t))
            return true;
        else {
            set.add(t);
            return false;
        }
    }
).remove();

• **動作確認用 CodePen: ** https://codepen.io/jun68ykt/pen/pozGgwX?editors=1011

とはいえ、よほどたくさんの <div class="post"> があるのでもない限りは、パフォーマンスに（ユーザーが体感し得るほどの）顕著な差が出るとは思えませんので、コード行数の少ない冒頭に書いたほうのコードでもよいかと思います。

追記

もうひとつ、解法となるコードを示します。
配列やオブジェクトの操作で便利なライブラリ lodash の_.uniqBy を使うと、配列から重複する要素を抜き、残った要素の順序は変わらない配列を得ることができます。何が同じであることをもって重複とするのかも、第２引数の関数で与えることができます。

これを使うと、以下のような短いコードで、テキストが重複する <div class="post"> の除去を書くことができます。

回答コード その3

$('.posts').html(
    _.uniqBy($('.post').toArray(), e => e.innerText )
);

上記のコードでは、$('.post') の配列から重複する（＝テキストが同じ）要素を抜いた配列を作り、 その配列で$('.posts') の内容を上書きしています。

• **動作確認用 CodePen: ** https://codepen.io/jun68ykt/pen/RwbvQwY?editors=1011

以上、参考になれば幸いです。

Answer 2

こんな感じですかね・・・

<script>
$(function(){
  var p=$('.post').map(function(){return $(this).prop('outerHTML');}).get();
  p=p.filter(function(i,j,k){return k.indexOf(i)==j;});
  $('.post').remove();
  $('.posts').append(p);
});
</script>
<div class="posts">
  <div class="post">こんにちは</div>
  <div class="post">こんにちは</div>
  <div class="post">こんにちは</div>
  <div class="post">こんにちは</div>
  <div class="post">Hello</div>
  <div class="post">よろしく</div>
  <div class="post">こんにちは</div>
  <div class="post">こんばんは</div>
  <div class="post">Hello</div>
</div>

※注意点

<div class="post">よろしく<div>

<div class="post">こんばんは<div>

divタグが閉じずに開始タグになっています。
この状態だと何をやっても無理ですので注意ください