Find duplicates by class and remove

Question

<ul class="list">
    <li class="item_20"></li>
    <li class="item_20"></li>
    <li class="item_20"></li>
    <li class="item_21"></li>
    <li class="item_21"></li>
    <li class="item_22"></li>
    <li class="item_22"></li>
</ul>

Is there a way with jQuery to determine and remove duplicates BY class in the example above? So only one li remains of every unique class.

look at the class selector – Arun P Johny Apr 20 '16 at 11:24 — Arun P Johny, Apr 20 '16 at 11:24

score 2 · Answer 1 · answered Apr 20 '16 at 11:28

You can try the below, I assumed that each li element contains only one class each.

$('.list li').each(function() {
  var
    $this = $(this),
    cls = '.' + $this.attr('class');

  $(cls).nextAll(cls).remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="item_20">item_20</li>
  <li class="item_20">item_20</li>
  <li class="item_20">item_20</li>
  <li class="item_21">item_21</li>
  <li class="item_21">item_21</li>
  <li class="item_22">item_22</li>
  <li class="item_22">item_22</li>
</ul>

score 1 · Answer 2 · answered Apr 20 '16 at 11:29

saw this on another topic

(function($) {
  'use strict';
  
  $.fn.removeDuplicates = function() {
    var $original = $([]);
    
    this.each(function(i, el) {
      var $el = $(el),
          isDuplicate;
      
      $original.each(function(i, orig) {
        if (el.isEqualNode(orig)) {
          isDuplicate = true;
          $el.remove();
        }
      });
      
      if (!isDuplicate) {
        $original = $original.add($el);
      }
    });
    
    return $original;
  };
  
}(jQuery));

$('.test').removeDuplicates();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="test className">content</div>
  <div class="test className">content</div>
  <div class="test className">content</div>
  <div class="test className">content</div>
</body>
</html>

Pranav C Balan · Answer 3 · 2016-04-20T17:18:24.833

You can use filter() to filter the duplicate li and remove them using remove()

$('ul.list li').filter(function(i) {
  // check element is not first element based on index
  return i != $('ul.list .' + this.className).index()
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li class="item_20"></li>
  <li class="item_20"></li>
  <li class="item_20"></li>
  <li class="item_21"></li>
  <li class="item_21"></li>
  <li class="item_22"></li>
  <li class="item_22"></li>
</ul>

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

This code below should work for your problem

var elem = {};
$('ul.list li').each(function() {
   var txt = $(this).attr('class');
   if (elem[txt])
       $(this).remove();
   else
       elem[txt] = true;
});

You can find out the explanations here : https://stackoverflow.com/a/2822974/4673732

Here's a fiddle with a demo : JSfiddle

edited May 23 '17 at 11:44

Community

1
1

answered Apr 20 '16 at 11:25

Riverside

133
1
4
11

score 0 · Answer 5 · answered Apr 20 '16 at 11:26

Use this Jquery :

$(document).ready(function(e) {
    var className = '';
    $('.list li').each(function(index, element) {
        if($(this).attr('class') != className){
            className = $(this).attr('class');
        }else{
            $(this).remove();
        }
    });
});

HTML

<ul class="list">
    <li class="item_20">a</li>
    <li class="item_20">b</li>
    <li class="item_20">c</li>
    <li class="item_21">d</li>
    <li class="item_21">e</li>
    <li class="item_22">f</li>
    <li class="item_22">g</li>
</ul>

What i did is m checking class of every li and if its matching with same name then it will remove that li.

Check fiddle

Find duplicates by class and remove

5 Answers5