jQuery: Finding duplicate ID's and removing all but the first

Question

    $('[id]').each(function () {

        var ids = $('[id="' + this.id + '"]');

        // remove duplicate IDs
        if (ids.length > 1 && ids[0] == this) $('#' + this.id).remove();

    });

The above will remove the first duplicate ID, however I want to remove the last. I've tried $('#'+ this.id + ':last') but to no avail.

Fiddle

In the fiddle the input with the value 'sample' should be kept when the append action takes place.

Placenta

Answer 1

Use jquery filter :gt(0) to exclude first element.

$('[id]').each(function () {
    $('[id="' + this.id + '"]:gt(0)').remove();
});

Or select all the available elements, then exclude the first element using .slice(1).

$('[id]').each(function (i) {
    $('[id="' + this.id + '"]').slice(1).remove();
});

Donothing

$(this).attr('id') === this.id – Circulate

rather than repeating the selector with :gt(0) you could just use ids.slice(1) to get everything except the 0th element in ids – Circulate

I want delete last element.. For that what should I do?? – Pinta

I tried $('.product').slice(0).remove(); it is deleting all products – Pinta

$('.product:not(:last-child)').slice(0).remove(); @DeviA This will remove all except the last child. – Balduin

Answer 2

Try:

 $('[id="' + this.id + '"]:not(#" + this.id + ":first)').remove();

Heliometer

Answer 3

you can try

$("#ID").nextAll().remove();

Bradley

he can try, but it won't work. It'll remove every following sibling of #id regardless of what element or ID they have. – Circulate

Answer 4

$('[id]').each(function() {
   var $ids = $('[id=' + this.id + ']');
   if ($ids.length > 1) {
     if(this.id === your_id)//which is duplicating
         $ids.not(':first').remove();
     }
});

Theatrics

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – Canonicity

it will remove the duplicate ids leaving the first one ,it is helpful to remove duplicate ids............. – Theatrics

it'll remove all duplicate ids except the first one – Theatrics

Answer 5

try this

var duplicated = {};

$('[id]').each(function () {   

    var ids = $('[id="' + this.id + '"]');

    if ( ids.length <= 1 ) return  ;

    if ( !duplicated[ this.id ] ){
         duplicated[ this.id ] = [];   
    }       

    duplicated[ this.id ].push( this );

});

// remove duplicate last ID, for elems > 1 
for ( var i in duplicated){

    if ( duplicated.hasOwnProperty(i) ){  

             $( duplicated[i].pop() ).remove();            
    }
}

and jsfiddle is http://jsfiddle.net/z4VYw/5/

Refrigerant

pop will only return one element. – Circulate

Answer 6

This code is longer than some of the others, but the double-nested loop should make its operation obvious.

The advantage of this approach is that it only has to scan the DOM to generate the list of elements with an id attribute once, and then uses the same list to find (and remove) the duplicates.

Elements that were already removed will have parentNode === null so can be skipped while iterating over the array.

var $elems = $('[id]');
var n = $elems.length;

for (var i = 0; i < n; ++i) {
    var el = $elems[i];
    if (el.parentNode) {  // ignore elements that aren't in the DOM any more
        var id = el.id;
        for (var j = i + 1; j < n; ++j) {
            var cmp = $elems[j];
            if (cmp.parentNode && (cmp.id === id)) {
                $(cmp).remove();  // use jQuery to ensure data/events are unbound
            }
        }
    }
}

Circulate

Answer 7

I'd use not() to remove the current element from ids and remove the rest:

(Fiddle)

$('body').on("click", ".placeholder", function() {

    data = '<section id="e1"><input name="e1name" /></section><section id="two"><input name="two" value="two section" /></section>';

    $('form').append(data);

        // ideally I'd like to run this function after append but after googling I find that's not possible.
        // for each ID ...
        $('[id]').each(function () {

            var ids = $('[id="' + this.id + '"]');

            if (ids.length>1) {                    
                ids.not(this).remove();            
            }

            return;

        });

});

Gastronome

Answer 8

Try Using The below function Works fine for me:

 $('#favourities-ajax ul li').each(function(i) {
      $('[id="' + this.id + '"]').slice(1).remove();
      });

Evocative

Answer 9

//This will remove all except the last child.
$('#my_id:not(:last-child)').slice(0).remove();

//This will remove all except the first child.
$('#my_id').slice(1).remove();

Balduin