js之DOM操作（刪除節點removeChild()）
阿新 • • 發佈：2019-02-10
刪除節點removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)引數:
node ：必需，指定需要刪除的節點。
注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在記憶體中，可通過 x 操作。
如果要完全刪除物件，給 x 賦 null 值，程式碼如下:
<!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"); // 在此完成該函式 // content.removeChild(content.childNodes[]); var nodelist = content.childNodes; for(var i = nodelist.length-1;i>=0;i--) { var x = content.removeChild(nodelist[i]); if(x.nodeType == 1) { document.write("刪除的第" + i + "個節點內容:" + x.innerHTML + "<br/>"); x = null; } } // for(var i = 0;i<nodelist.length;i++) { // var x = content.removeChild(nodelist[i]); // if(x.nodeType == 1) { // document.write("刪除的第" + i + "個節點內容:" + x.innerHTML + "<br/>"); // } // } } </script> <button onclick="clearText()">清除節點內容</button> </body> </html>
執行結果：
刪除的第9個節點內容:java
刪除的第7個節點內容:jquery
刪除的第5個節點內容:javascript
刪除的第3個節點內容:php
刪除的第1個節點內容:html