jquery remove duplicate li

Question

<ul id="myid">   
<li>microsoft</li>  
<li>microsoft</li>  
<li>apple</li>  
<li>apple</li>  
</ul>   

I want to remove duplicates from li by using jquery.

How can I do that?

Answer 1

uniqueLi = {};

$("#myid li").each(function () {
  var thisVal = $(this).text();

  if ( !(thisVal in uniqueLi) ) {
    uniqueLi[thisVal] = "";
  } else {
    $(this).remove();
  }
})

This build an index (an object) of unique values. For your example, uniqueLi will look like this afterwards:

{
  "microsoft": "", 
  "apple": ""
}

So whenever a value is encountered that has been added to the index before, the associated <li> gets removed.

Answer 2

You could use

var inner = [];
$('li').each( function(index, Element){
    if (jQuery.inArray(this.innerHTML, inner) == -1){
      inner.push(this.innerHTML);
    }
    else {
      $(this).remove();
    }
});

Answer 3

Here's a function that will do it, a slightly different way:

function removeDuplicateItems(id) {
    var ul = $('#' + id);

    $('li', ul).each(function() {
        if($('li:contains("' + $(this).text() + '")', ul).length > 1)
            $(this).remove();
    });
}

Call with removeDuplicateItems('myid');

Answer 4

example I find that the script is faster

var liText = '', liList = $('#myid li'), listForRemove = [];

$(liList).each(function () {

  var text = $(this).text();

  if (liText.indexOf('|'+ text + '|') == -1)
    liText += '|'+ text + '|';
  else
    listForRemove.push($(this));

})​;

$(listForRemove).each(function () { $(this).remove(); });