CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3577990
user3577990

Reputation: 3

remove all items except one of each class with jquery

I have a div that contains some items like that 

<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

I want keep the first item of each class and remove others

Upvotes: 0

Views: 194

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Use :not() selector along with :first selector.

$('.KNet:not(:first),.Visa:not(:first)').remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>
UPDATE 1 : If all span elements has only single class name then you can do something like this using filter() method.

//$('.KNet:not(:first),.Visa:not(:first)').remove();

$('.multiSel span').filter(function() {
  return $(this).is(':not(.' + this.className + ':first)')
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

UPDATE 2 : Or much better way using a hash map object which holds the classname as the property.

var hasRef = {};

$('.multiSel span').each(function() {
  if (hasRef[this.className]) $(this).remove();
  else hasRef[this.className] = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

Upvotes: 1

FalcoB
FalcoB

Reputation: 1333

loop through the items and the classes...

var classes = [];
$(".multiSel").find("span").each(function(i){
  var curClass= $(this).attr("class");
  if(jQuery.inArray( curClass, classes )>-1){
    $(this).remove();
  }
  classes[i] = curClass;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

UPDATE sorry for not reading exactly, what you wanted... now it should so what you want....

fill an array with all classes... then look with inArray if it already exists.. if not (-1) then remove it... so you just keep the first items

Upvotes: 0

Related Questions