Question

我有一些使用XMLHttpRequest从XML文件加载的内容：

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

用于获取内容的代码：

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;

内容每3秒更新一次，但问题在旧内容重复和堆叠以及新内容时开始。此外，UID属性值是从与内容相同的XML文件加载的 - 因此所有新的重复内容都具有与旧重复内容相同的UID。

如果我不够清楚，这就是正在发生的事情：

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

那么你将如何删除所有具有相同UID值的div，除了之外的原始div？

Answer 1

您可以在添加之前检查您添加的uid是否已存在。

＆＃13;

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;

＆＃13;

Answer 2

一个选项（使用“vanilla javascript”，没有jQuery），如果您确定DOM中的第一个元素是正确的，那就是使用document.querySelectorAll遍历元素，removing each of除了第一个。例如，如果您的<div> ID为panel，并且您希望从此容器内部删除具有重复UID的div（使用11111作为示例）：

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是因为document.querySelectorAll返回类似数组的NodeList，而不是实际的数组。

（OP更新后更新：这将在从XML文件中检索数据之后进行。）

Answer 3

您可以查看您的文档中是否已有div该文件。

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

上面的代码将搜索文档中具有相同值的属性uid的任何div。

所以，你的最终代码将是：

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

检测与另一个元素

3 个答案: