Detect element that has the same attribute value as another element

Question

I have some content that is loaded from a XML file with XMLHttpRequest:

<div uid="29710" >
content....
</div>
<div uid="19291" >
content....
</div>
<div uid="099181" >
content....
</div>

The code used to get the content:

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","notes.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 

var x = xmlDoc.getElementsByTagName("noteboard");
var newHTML = "";
for (i=0;i<x.length;i++) { 
   newHTML += "<div><div uid='"+ x[i].getAttribute('uid')+"'>"
            + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
            + "<br>"+ x[i].getElementsByTagName("message")[0].childNodes[0].nodeValue
           +"</div></div>";
}
document.querySelector('#panel').innerHTML += newHTML;

The content is updated every 3 seconds, but the problem starts when the old content is repeated and piled up, as well as the new content. Also, the UID attribute value is loaded from the same XML file as the content - so all the new repeated content has the same UID as the old repeated content.

If I am not clear enough, this is the sort of thing that is happening:

<div uid="19291">Old Content</div>
<div uid="77191">New Content</div>
<div uid="19291">Old Content</div>
<div uid="19291">Old Content</div>
<div uid="21503">New Content</div>

So how would you remove all the divs that have the same UID value as each other, except for the original one ?

how are you adding it in the first place ? (show code)

Gabriele Petrioli
– Gabriele Petrioli

2015-09-18 22:20:10 +00:00
Commented Sep 18, 2015 at 22:20 — Gabriele Petrioli
– Gabriele Petrioli, Commented Sep 18, 2015 at 22:20
Okay, the answer was edited.

Cat Overlord
– Cat Overlord

2015-09-18 22:25:49 +00:00
Commented Sep 18, 2015 at 22:25 — Cat Overlord
– Cat Overlord, Commented Sep 18, 2015 at 22:25
ok, added an answer.

Gabriele Petrioli
– Gabriele Petrioli

2015-09-18 22:31:37 +00:00
Commented Sep 18, 2015 at 22:31 — Gabriele Petrioli
– Gabriele Petrioli, Commented Sep 18, 2015 at 22:31

Gabriele Petrioli · Accepted Answer · 2015-09-18 22:30:17Z

1

You could check if the uid you are adding already exists in the page before adding it.

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","notes.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 

var x = xmlDoc.getElementsByTagName("noteboard");
var newHTML = "";
for (i=0;i<x.length;i++) { 

  // check if the UID exists in the page and only add it if it does not
  var uid = x[i].getAttribute('uid');
  if ( !document.querySelector('#panel *[uid="'+ uid +'"]') ){

    newHTML += "<div><div uid='"+ x[i].getAttribute('uid')+"'>"
            + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
            + "<br>"+ x[i].getElementsByTagName("message")[0].childNodes[0].nodeValue
            + "</div></div>";
  }
}

document.querySelector('#panel').innerHTML += newHTML;

answered Sep 18, 2015 at 22:30

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

Cat Overlord Over a year ago

Great! Even better than removing the duplicate element after it was added.

Community · Accepted Answer · 2020-06-20 09:12:55Z

One option (using "vanilla javascript", no jQuery), if you are sure that the correct element is first in the DOM, is to use document.querySelectorAll to loop through the elements, removing each of them except the first one. For instance, if you had a <div> with an ID of panel and you wanted to remove divs with a duplicate UID (using 11111 as an example) from inside of this container:

var divs = document.querySelectorAll('div[uid="11111"]');
Array.prototype.forEach.call(divs, function(el, idx) { 
    if(idx > 0) { 
        document.getElementById('panel').removeChild(el);    
    }
});

Array.prototype is used because document.querySelectorAll returns an array-like NodeList, not an actual Array.

(Update following OP's update: this would go after the data has been retrieved from the XML file.)

Buzinas · Accepted Answer · 2015-09-18 22:35:12Z

You can see if your document already has a div with that uid.

var div = document.querySelector('div[uid=' + items[i].getAttribute('uid') + ']');

The code above will search the document any div that has an attribute uid with the same value.

So, your final code will be something like:

var xhr = new XMLHttpRequest();

xhr.addEventListener('load', function(e) {
  var items = xhr.responseXML.getElementsByTagName("noteboard");

  for (var i = 0; i < items.length; i++) {
    var div = document.querySelector('div[uid=' + items[i].getAttribute('uid') + ']');
    var newHTML = '';
    if (!div) { // it doesn't exist yet
      newHTML += "<div><div uid='"+ x[i].getAttribute('uid')+"'>"
            + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
            + "<br>"+ x[i].getElementsByTagName("message")[0].childNodes[0].nodeValue
           +"</div></div>";
    }
  }
  document.getElementById('panel').innerHTML += newHTML;
});

xhr.open("GET", "notes.xml", false);
xhr.send();

Collectives™ on Stack Overflow

Detect element that has the same attribute value as another element

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related