hide duplicate div in jquery

Question

I have some layers that are dynamically put in as follows

<div><p class="locid">2<p></div>
<div><p class="locid">1<p></div>
<div><p class="locid">2<p></div>
<div><p class="locid">3<p></div>
<div><p class="locid">4<p></div>

What I need to do is hide the second occurrence of this layer so it appears as follows

<div><p class="locid">2<p></div>
<div><p class="locid">1<p></div>
<div><p class="locid">3<p></div>
<div><p class="locid">4<p></div>

Any ideas?

Thanks

Jamie

Answer 1

// get a collection of p's matching some value
$("p.locid").filter(function() {
    return $(this).text() == '2';

// hide the (div) parent of the second match
}).eq(1).parent().hide();

Demo: http://jsfiddle.net/WjgxQ/

Answer 2

Try this:

var arr = new array();

$('.locid').each(function(){
  if ($.inArray($(this).text(), arr) !== -1){
     $(this).closest('div').remove();
  }
  else{
    arr[] = $(this).text();
  }
});

Answer 3

Hi,

have a look at:

http://api.jquery.com/jQuery.unique/

This does exactly what you're looking for ;)

Greets

Simon

Answer 4

Interesting. Try this.

var a = new Array();
$('p.locid').each(function(){
    text = $(this).text();
    if($.inArray(text, a)){
        $(this).closest('div').hide();
    }else{
        a.push(text);
    }
});