怎么點擊第一下沒有反應，然后再點擊一下刪除了3個，然后再點擊依次刪除一個
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<body>
<div id="content">
? <h1>html</h1>
? <h1>php</h1>
? <h1>javascript</h1>
? <h1>jquery</h1>
? <h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
? var content=document.getElementById("content");
? for(i=0;i<content.childNodes.length;i++)
? {
? ? ? var x=content.removeChild(content.childNodes[i]);
? ? ? x=null;
? }
}
</script>
<button onclick="clearText()">清除節點內容</button>
2018-05-05
看完你們的見解，明白了好多，謝謝各位大神
2017-05-26
小于飛飛大神學習時間太————了吧，算了下，每天學習24小時，一年到頭不休息，也要學5年多啊。
2017-05-26
小于飛飛大神學習時間太————了吧，算了下，每天學習24小時，一年到頭不休息，也要學5年多啊。
2017-02-25
for(var?i=0;?i<content.childNodes.length;){ ??????content.removeChild(content.childNodes[i]); ??}超級簡單，或者用while也可以
2016-12-05
研究了一下，這個問題其實主要的原因有兩個：
1、?content.childNodes.length 不能直接寫進循環條件里，因為每次執行后子節點的數量都會變，所以應該在循環前先把子節點數量賦值給一個變量，再放到循環條件里。
2、最后刪除節點?content.removeChild(content.childNodes[0]); 這里的子節點下標也不能是循環里的自增變量（i），因為第一次循環刪除了第1個子節點，那么第2個子節點就會變成第1個子節點，第3個子節點會變成第2個子節點，以此類推……
當第二次循環時 i=1，也就是刪除第2個子節點（原第3個節點），是會跳過1個節點刪除的，因為循環條件在自增，而節點是在遞減。
比如，原來5個子節點分別是：
html（刪除）
php（跳過，第2次點擊才會被刪除）
javascript（刪除）
jquery（跳過，第3次點擊才會被刪除）
java（刪除）
最后代碼：
function?clearText()?{ ??var?content=document.getElementById("content"); ??//?在此完成該函數 ??var?del_node_length?=?content.childNodes.length;? ??for(var?i?=?0;?i<del_node_length;?i++){ ??????var?x?=content.removeChild(content.childNodes[0]); ??} }2016-11-03
兼容瀏覽器一次刪除一個 <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無標題文檔</title> </head> <body> <div?id="content"> ??<h1>html</h1> ??<h1>php</h1> ??<h1>javascript</h1> ??<h1>jquery</h1> ??<h1>java</h1> </div> <p?id="xyz"></p> <script?type="text/javascript"> function?clearText()? { ??var?content=document.getElementById("content"); ??//?在此完成該函數 ??var?array_length=content.childNodes.length; ??for(var?i=0;i<array_length;i++) ??{ ??????if(content.childNodes[0].nodeType==1) ????????{ ???????????var?x?=?content.removeChild(content.childNodes[0]); ????????????document.getElementsByTagName("p")[0].innerHTML+="刪除元素:"+x+"<br/>"+"刪除元素的內容:"+x.innerHTML+"<br/><br/>"; ????????????break; ????????} ????else{ ????????????var?x=content.removeChild(content.childNodes[0]); ????????????document.getElementsByTagName("p")[0].innerHTML+="刪除元素:"+x+"<br/>"+"刪除元素的內容:"+x.innerHTML+"<br/><br/>"; ????????} ??} } </script> <button?onclick="clearText()">清除節點內容</button> </body> </html>2016-10-29
大言不慚次，哈哈。搞懂這個這節就可以出師了。
<div id="content">1
? <h1>html</h1>2
? <h1>php</h1>3
? <h1>javascript</h1>4
? <h1>jquery</h1>5 ?
? <h1>java</h1>6 ?
</div>
<script type="text/javascript">
var content=document.getElementById("content");
var x=content.childNodes;
function get_nextSibling(n){
??? var x=n.nextSibling;
??? while(x && x.nodeType!=1){ ?
??????? x=x.nextSibling;?? ?
??? }?? ?
??? return x;????? ?
??? }??? ?
function clearText() {
??? nodel=x.length
??? for(var i=0;i<nodel;i=i+10){????????? ?
??????? var y=get_nextSibling(x[i]);?????????????? ?
??????? if(y!=null){
??????????? content.removeChild(y);??????????????? ?
???????? }else{
????????? document.write("<br>已經是最后一個節點");????? ?
???????? }
??? } ??
}
</script>??
<button onclick="clearText()">清除節點內容</button>
2016-10-13
?var jj = content.childNodes;
? for(var i=0;i<jj.length;)
? content.removeChild(jj[i]);
?
? return clearText;
} ? i不要自加就可以做到一鍵清除了
2016-10-10
謝謝分享。
2016-09-11
這樣可以清楚得看到共清除了11個節點，將注釋取消就可以每次清除一個h1節點，將break注釋可以一次全清
function clearText() {
? var content=document.getElementById("content");
? // 在此完成該函數
? x=content.childNodes;
? for(i=0;i<x.length;i++){
? ? ? ? // ? if(x[i].nodeType!=1){
? ? ? ? // ? ? ? ? ? continue;
? ? ? ? // ? }else{
? ? ? ? ? ? ? ? ? ?y=content.removeChild(x[i]);
? ? ? ? ? ? ? ? ? ?document.getElementById("chakan").innerHTML=y.innerHTML;
? ? ? ? ? ? ? ? break;
? ? ? ? // ? ?} ? ??
? ? }?
}