removing duplicates from html elements

Question

what\'s the best way to remove the grapes duplicate from this? there are tons of ways of removing duplicates from simple arrays, but this would be an array with html element

Answer 1

Here is the working fiddle for this:-

http://jsfiddle.net/HwUUs/1/

$( "div:contains('grapes')" ).remove();

Answer 2

http://jsfiddle.net/S3wXM/1/

Assuming that you wish to remove only one of the duplicates.

Using contains, like the answer above but implementation is slightly different.

$($("div:contains('grapes')")[0]).remove();

http://api.jquery.com/jQuery.unique/ - This also might be of use to you.

Answer 3

:has expects an element selector while :contains takes a string

see http://api.jquery.com/contains-selector/

so this should do the trick:

 $('.fruit').each(function () {
      $('.fruit:contains("' + $(this).text() + '"):gt(0)').remove();  
 });

fiddle: http://jsfiddle.net/kam7E/

Answer 4

Try

var obj = {};
$('.fruit').each(function(){
    var text = $.trim($(this).text());
    if(obj[text]){
        $(this).remove();
    } else {
        obj[text] = true;
    }
})

Demo: Fiddle

Answer 5

var uniqueFruits = [];
$(".fruit").each(function(i,e){
    var thisFruit = $.trim($(e).text());
    if(uniqueFruits.indexOf(thisFruit) == -1)
        uniqueFruits.push(thisFruit);
    else
        $(e).remove();
});

http://jsfiddle.net/a7E9e/

Answer 6

jsFiddle here: http://jsfiddle.net/THEtheChad/UKRwf/

var found = {};
var $unique_fruits = $('.fruit').filter(function(){
   var data = this.innerHTML.trim();

   if(!found.hasOwnProperty(data)) return found[data] = true;
});