Remove duplicate elements from HTML string

Question

I have this HTML:

<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='tab_5_data'>
<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='tab_5_data'>
<input type=hidden' class='allDomObjects' value='grid_1' id='grid_1_domType'>

In this screen you can see that class name is same, but their ids are different.

I write this to get all fields:

$(unescape(HtmlString)).filter(".allDomObjects").each(function() {
    console.log(this.id);
});

This .each() loop runs 7 times, because 7 fields have 'allDomObjects' class. You can see there are duplicate elements in this string.

Requirement:

I want to remove duplicate elements from HTML string.

Input:

<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='tab_5_data'>
<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='tab_5_data'>
<input type=hidden' class='allDomObjects' value='grid_1' id='grid_1_domType'>

Desired output:

<input type=hidden' class='allDomObjects' value='' id='grid_17_domType'>
<input type=hidden' class='allDomObjects' value='' id='tab_5_data'>
<input type=hidden' class='allDomObjects' value='grid_1' id='grid_1_domType'>

And what issue are you experiencing with the code you've written towards this requirement so far? — Evan Knowles
– Evan Knowles, Commented Oct 29, 2014 at 7:09
I don't know how to achieve this? We can use document.createElement and check for duplicates, But this is too much code and may be it's not good to write extra code when we achieve this by 2 or 3 lines. If i am not wrong we can do this by 'Regx' and LOC is about maximum 4 or 5 line. — ankur_agarwal
– ankur_agarwal, Commented Oct 29, 2014 at 7:14
Can you explain how you ended up in this situation in the first place? I just want to double-check that you are trying to fix the right end of the problem. — Tomalak
– Tomalak, Commented Oct 29, 2014 at 7:17
I am getting this string from my client's server via ajax, And i don't have permission to change there. — ankur_agarwal
– ankur_agarwal, Commented Oct 29, 2014 at 7:23
You have double ids. An id attribute value should be unique. You should address the problem ex ante, not after te fact. — KooiInc
– KooiInc, Commented Oct 29, 2014 at 7:28

dfsq · Accepted Answer · 2014-10-29 07:14:20Z

2

I think you can use some map object to store ids:

var map = {};
$(unescape(HtmlString)).each(function() {
    if (map[this.id]) {
        $(this).remove();
    }
    else {
        map[this.id] = true;
    }
});

answered Oct 29, 2014 at 7:14

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vks · Accepted Answer · 2014-10-29 07:17:52Z

0

You must not parse html with regex.its prone to errors.If you dont get a better solution you can try this.

<input\s+type=hidden'\s+class='allDomObjects'\s+value='[^']*'\s+id='([^']*)'>(?=.*?<input\s+type=hidden'\s+class='allDomObjects'\s+value='[^']*'\s+id='\1'>)

Put flags g and s.See demo.Replace by empty string.

http://regex101.com/r/sU3fA2/36

answered Oct 29, 2014 at 7:17

vks

68.1k11 gold badges96 silver badges132 bronze badges

Comments

zzlalani · Accepted Answer · 2014-10-29 07:24:06Z

0

try this. Remember you need to keep 1st element in all the duplicate so start the loop from 1

$(unescape(HtmlString)).filter(".allDomObjects").each(function() {
    if ( $('[id="'+this.id+'"]').length > 1 ) {
        for ( var i = 1; i < $('[id="'+this.id+'"]').length, i++ ) {
            $('[id="'+this.id+'"]')[i].remove();
        }
    }
});

answered Oct 29, 2014 at 7:24

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

2 Comments

ankur_agarwal Over a year ago

Can you please look at this line $('[id="'+this.id+'"]')[i].remove(); this will remove from DOM, Not from HTML string.

zzlalani Over a year ago

so in case if you have bind any events on id it will only be bind to the 1st element with this id also removing from html doesn't make sense keeping it in dom? no?

Collectives™ on Stack Overflow

Remove duplicate elements from HTML string

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related