我使用一個函數在PHP文件創建一些「禮」等這樣一些「跨越」元素：removeChild之（）錯誤在JavaScript

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

問題是，在「跨越」 S仍然存在。

來源

2012-06-26 BigCola

您的原始代碼不起作用，因爲您從0到childNodes.length - 1但是你忘記了，一旦你刪除項目＃0並增加計數器，項目＃1在下一次迭代中被移除; ＃0仍然會有一個項目。

下面的代碼可以用來刪除元素的內容：

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

demo

PS：你的HTML標記是無效的。

來源

2012-06-26 21:40:43

的說明：對於ul唯一有效的子元素是零個或多個li元素：https://developer.mozilla.org/en/HTML/Element/ul

看看這個的jsfiddle：http://jsfiddle.net/MrpeF/

在這裏面，我已經創建了兩個ul秒 - 一個用有效元素（僅限li），另一個則如您所描述，span也是兒童。如果您觀察控制檯運行時，您會發現childNodes中包含li元素（奇怪的是，我的代碼間距!?中的TextNodes）。區別在於，有效的HTML在li內部有span，因此刪除li可以實現您的目標。

另一件值得一提的事情是，你的for...循環效率低下。通過計算每次迭代的childNodes的長度，可以使循環成本超過需求。實際上在進入循環之前計數環的長度是更有效的：

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

文檔

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

來源

2012-06-26 21:27:33

這可能會觸發異常，一旦元素被移除，長度會改變;並且childNodes向上移動一個位置。 –

removeChild之（）錯誤在JavaScript

回答

demo

相關問題