Question

Disclaimer: I am fully aware that the id attribute is for unique IDs. In my case, when the ajax request takes longer than usual it can glitch, causing two same chat messages. I am also aware that there are similar questions out there like this, but I have been unable to find one that solves my issue.

---

This is what I want to do:

1. Are there any duplicate IDs inside the div chat_log?
2. What are they?
3. Delete all the duplicates
   • Making sure that the original one is still there.

---

I’ve tried using the following code:

         $('[id]').each(function () {
            var ids = $('[id=' + this.id + ']');
            if (ids.length > 1 && ids[0] == this) {
                $(ids[1]).remove();
            }
        });

But I’m not sure how I can adapt that method to my situation, nor am I sure if it would be possible.

Answer 1

How can you ensure that something is unique? Let’s say you have a bunch of vegetables (cucumbers, turnips, pizzas etc.) You want to ensure colour uniqueness, making sure that any colour only appears once. How’d you do it?

What I’d do is make a list. I’d go through every vegetable, and inspect its colour. If the colour is already on the list, we’ll remove that vegetable from the bunch. Otherwise, we leave it as-is and add its colour to our list.

Once that logic is understood, all we need is to convert it to code! What a fantastically trivial thing to do (on paper, of course.)

//assumes $elem is the element you're deleting duplicates in

//create the ids list we'll check against
var ids = {};

//go over each element
var children = $elem.children();
for ( var i = 0, len = children.length; i < len; i++ ) {
    var id = children[ i ].id;

    //was this id previously seen?
    if ( ids.hasOwnProperty(id) ) {
        $( children[i] ).remove();
    }
    //a brand new id was discovered!
    else {
        ids[ id ] = true;
    }
}
//done!

This is the very simple, plain logic version. You can make much fancier ways with some weird sizzle selectors, but this should get you started.

Demo (without jquery): http://tinkerbin.com/qGJpPsAQ