Jquery remove duplicates with the same html

Question

I'm working on "removing duplicates" from html with jQuery. An example is the following:

<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>

What I would like to end up with is:

 <p class="duplicateRemove">hello</p>
 <p class="duplicateRemove">something else</p>
 <p class="duplicateRemove">some more content</p>
 <p class="duplicateRemove">content</p>
 <p class="duplicateRemove">this is no duplicate</p>
 <p class="duplicateRemove">last p tag finally</p>

So every element to check has the same class and I want to remove the element, when the html() is the same.

Can anybody help me out with that? Can't seem to find anything helpful that jQuery provides for that...

score 0 · Answer 1 · answered Apr 03 '20 at 10:56

You could use Map to store seen elements based on the inner html content and use it with jquery filter method to filter html based on that map.

const map = new Map()

const filtered = $('.duplicateRemove')
  .filter(function() {
    const html = $(this).html();
    if (map.has(html)) return false;
    else {
      map.set(html)
      return true;
    }
  })

$('body').html(filtered)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>

Jquery remove duplicates with the same html

1 Answers1