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.

novalagung · Accepted Answer · 2017-04-20T07:16:11.217

25

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();
});

edited Apr 20 '17 at 07:16

answered Apr 02 '13 at 09:04

novalagung

10,905
4
58
82

1

`$(this).attr('id') === this.id` – Alnitak Apr 02 '13 at 09:13
2

rather than repeating the selector with `:gt(0)` you could just use `ids.slice(1)` to get everything except the 0th element in `ids` – Alnitak Apr 02 '13 at 13:08
I want delete last element.. For that what should I do?? – Devi A May 31 '19 at 11:59
I tried $('.product').slice(0).remove(); it is deleting all products – Devi A May 31 '19 at 12:00
`$('.product:not(:last-child)').slice(0).remove(); ` @DeviA This will remove all except the last child. – Dexter Jan 03 '23 at 03:20

score 4 · Answer 2 · edited Apr 02 '13 at 09:20

4

Try:

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

edited Apr 02 '13 at 09:20

Timothy Groote

8,614
26
52

answered Apr 02 '13 at 09:03

Mahesh Reddy

356
4
14

score 3 · Answer 3 · edited Apr 02 '13 at 13:43

3

you can try

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

edited Apr 02 '13 at 13:43

Samuel Liew

76,741
107
159
260

answered Apr 02 '13 at 09:14

he can try, but it won't work. It'll remove every following sibling of `#id` regardless of what element or ID they have. – Alnitak Apr 02 '13 at 09:15

score 2 · Answer 4 · answered Aug 18 '15 at 10:39

2

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

answered Aug 18 '15 at 10:39

user2254898

21
2

3

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. – SuperBiasedMan Aug 18 '15 at 10:56
1

it will remove the duplicate ids leaving the first one ,it is helpful to remove duplicate ids............. – user2254898 Aug 18 '15 at 11:09
1

it'll remove all duplicate ids except the first one – user2254898 Aug 18 '15 at 11:13

rab · Answer 5 · 2013-04-02T10:16:41.440

1

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/

edited Apr 02 '13 at 10:16

answered Apr 02 '13 at 09:13

rab

4,134
1
29
42

`pop` will only return one element. – Alnitak Apr 02 '13 at 09:24

Alnitak · Answer 6 · 2013-04-02T09:34:38.990

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
            }
        }
    }
}

score 0 · Answer 7 · answered Apr 02 '13 at 09:06

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;

        });

});

score 0 · Answer 8 · answered Aug 22 '17 at 07:05

0

Try Using The below function Works fine for me:

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

answered Aug 22 '17 at 07:05

Vignesh Ben

11
2

score 0 · Answer 9 · answered Jan 03 '23 at 03:21

0

//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();

answered Jan 03 '23 at 03:21

Dexter

74
8

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

9 Answers9

Linked