Removing items with duplicate data attribute

Question

I've got a list of divs like so

<div data-id="001">Blah Blah Blah</div>
<div data-id="001">Blah Blah Blah</div>
<div data-id="002">Blah Blah Blah</div>
<div data-id="002">Blah Blah Blah</div>
<div data-id="002">Blah Blah Blah</div>
<div data-id="003">Blah Blah Blah</div>
<div data-id="003">Blah Blah Blah</div>
<div data-id="004">Blah Blah Blah</div>

Is it possible to scan through this list and remove any items with duplicate data so that I'll end up with something more like:

<div data-id="001">Blah Blah Blah</div>
<div data-id="002">Blah Blah Blah</div>
<div data-id="003">Blah Blah Blah</div>
<div data-id="004">Blah Blah Blah</div>

score 15 · Accepted Answer · answered Jun 28 '13 at 07:47

15

Sure as you enumerate all the items just keep track of any that you've already found.

var found = {};
$('[data-id]').each(function(){
    var $this = $(this);
    if(found[$this.data('id')]){
         $this.remove();   
    }
    else{
         found[$this.data('id')] = true;   
    }
});

Live example: http://jsfiddle.net/kpEtQ/

answered Jun 28 '13 at 07:47

Jamiec

133,658
13
134
193

That'll work, thanks :D – Matt Coady Jun 28 '13 at 07:49

score 2 · Answer 2 · edited May 23 '17 at 11:53

2

See: JQuery: Remove duplicate elements?

Instead of checking

 $(this).text()

check

$(this).attr('data-id')

edited May 23 '17 at 11:53

Community

1
1

answered Jun 28 '13 at 07:47

derrickkwa

51
2

Removing items with duplicate data attribute

2 Answers2