jQuery code to delete all spans with same content but keep one

Question

Hello,

Say i have the following html:

<span class="fruit">Apple</span>
<span class="fruit">banana</span>
<span class="fruit">Apple</span>
<span class="fruit">Apple</span>
<span class="fruit">orange</span>

I tried different methods but it didn't work, I want a jQuery code to remove all (.fruit) spans with same content but keep one (the first if possible), so i will end up with the following:

<span class="fruit">Apple</span>
<span class="fruit">banana</span>
<span class="fruit">orange</span>

Thank you

Answer 1

 $("span.fruit:contains(Apple):not(:first)").remove();

Answer 2

var temp = array[];

$(".fruit").each(function(i) {
    var html = $($this).html();
    if($.inArray(html, temp)) {
        $($this).remove();
    }
    else {
        temp.push(html);
    }

});

Answer 3

$('span.fruit').each(function(){
  return $('span.fruit:contains('+$(this).text()+'):not(:first)').remove();
})

Answer 4

temp = $('span:first').clone(true);
//remove all the span
$().html();
$().append(temp);