0

我在 php 文件中使用一个函数来创建一些“li”和一些“span”元素，如下所示：

while($row_quotes=mysql_fetch_array($result_quotes) and $x<10){
$x++;
echo "<li class='citazione'>".$row_quotes['citazione']."</li><span class='citazione_info'>".$row_quotes['personaggio']." - ".$row_quotes['libro']."</span>";
}

这些包含在“ul id='quotes_holder'”中。然后我有一个javascript函数，在某个调用中应该删除所有创建的“li”和“span”元素，所以我认为使用包含“ul”的removeChild（）方法可以删除它们。

这是javascript函数：

function ritorna_filtri(obj, autore){
var index=obj.selectedIndex;
var selected=obj.childNodes[index];
var value= selected.value;
var div=document.getElementById('quotes_holder');
for(l=0;l<div.childNodes.length;l++){
    div.removeChild(div.childNodes[l]);
}

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        response=xmlhttp.responseText;
        jsonObj=eval("("+response+")");
        for(i=0;i<jsonObj.libri.length;i++){
            var li=document.createElement('li');
            var text=document.createTextNode(jsonObj.libri[i].titolo);
            li.appendChild(text);
            li.setAttribute('class', 'filtro');
            div.appendChild(li);
        }
    }
}
xmlhttp.open("GET","ritorna_filtri.php?filtro="+value+"&autore="+autore,true);
xmlhttp.send();
}

问题是当函数执行时，只有“li”元素被删除，“span”仍然存在。

4

2 回答 2

2

注意： a 的唯一有效子元素ul是零个或多个li元素：https ://developer.mozilla.org/en/HTML/Element/ul

看看这个 jsFiddle：http: //jsfiddle.net/MrpeF/

在其中，我创建了两个uls - 一个具有有效元素（li仅），另一个如您所描述的那样，spans 也是子级。如果您在控制台运行时观察它，您会发现只有li元素包含在childNodes（奇怪的是，我的代码间距中的 TextNodes ！？）。不同之处在于，有效的 HTML 具有span内部li，因此删除li将实现您的目标。

值得一提的另一件事是您的for...循环效率低下。通过计算childNodes每次迭代的长度，您使循环成本超过了它需要的成本。在实际进入循环之前计算循环的长度更有效：

var looplen = div.childNodes.length;
for(l=0;l<looplen;l++){
    div.removeChild(div.childNodes[l]);
}

文档

于 2012-06-26T21:27:33.273 回答
0

您的原始代码不起作用，因为您从0to循环，childNodes.length - 1但您忘记了一旦删除项目 #0 并增加计数器，项目 #1 将在下一次迭代中删除；#0 处仍然会有一个项目。

以下代码可用于删除元素的内容：

var div = document.getElementById('quotes_holder');
while (div.firstChild) {
    div.removeChild(div.firstChild);
}​

演示

PS：您的 HTML 标记无效。

于 2012-06-26T21:40:43.817 回答