demo

Question

我在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”仍然存在。

Answer 1

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

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

在其中，我创建了两个ul s - 一个包含有效元素（仅li），另一个如您所述，span s也是孩子。如果你在运行时观察控制台，你会发现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]);
}

<强>文档

MDN上的Node.removeChild - https://developer.mozilla.org/En/DOM/Node.removeChild
MDN上的Node.childNodes - https://developer.mozilla.org/en/childNodes

Answer 2

由于您从0循环到childNodes.length - 1，原始代码不起作用，但是您忘记了删除项目＃0并递增计数器后，在下一次迭代中删除项目＃1 ;在＃0仍会有一个项目。

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

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

demo

PS：您的HTML标记无效。

javascript中的RemoveChild（）错误

2 个答案:

demo