Question

Possible Duplicate:
jquery remove duplicate li

I have a List which looks like the following: http://jsfiddle.net/UwPTF/

<ul class="uol">
      <li>beta</li>
      <li>gamma</li>
      <li>alpha</li>
    <li>beta</li>
    <li>zeta</li>
    <li>BETA</li>            
</ul>

I have 2 buttons, one to highlight the items that are duplicate and the other to remove the duplicate items.

I am trying to use the filter function. If you can explain your code, it’s highly appreciated.

Answer 1

HTML

<ul id="list" class="uol">
  <li>beta</li>
  <li>gamma</li>
  <li>alpha</li>
  <li>beta</li>
  <li>zeta</li>
  <li>BETA</li>            
</ul>

<input id="find" type="button" value="Find" />
<input id="remove" type="button" value="Remove" />​

JavaScript

$('#find').click(function(){
  $('#list li').filter(function(){
    return $(this).siblings().text().toUpperCase().indexOf($(this).text().toUpperCase()) != -1;
  }).addClass('selecteditems');
});

$('#remove').click(function(){
  var removed = [];
  $('.selecteditems').each(function(i, item){
    if($.inArray($(item).text().toUpperCase(), removed) != -1){
      $(item).remove();
    }
    else{
      removed.push($(item).text().toUpperCase());
      $(item).removeClass('selecteditems');
    }
  });
});​

When you click the find button, the filter gets applied to every <li> item in your unordered list with the id list. It then gets all of the other <li> item’s, adds their text together into one string and capitalizes it. It then checks if the current <li> item when it is capitalized is contained in that string. If it is there, it returns true so it gets the class selecteditems added to it.

When you click the remove button, it removes all but the first <li> item with the class selecteditems, and removes the class from the first <li> item.

Check it out here.

---

If you want to be absolutely sure that you are checking against individual items instead of checking against a string of all items, you can change your code for finding to this:

$('#find').click(function(){
  $('#list li').filter(function(){
    var sibs = [];
    $.map($(this).siblings(), function(sibling){
      sibs.push($(sibling).text().toUpperCase());
    });
    return $.inArray($(this).text().toUpperCase(), sibs) != -1;
  }).addClass('selecteditems');
});