1. 概述
刪除後的節點雖然不在文檔樹中了,但其實它還在內存中,可以隨時再次被添加到別的位置。
當你遍歷一個父節點的子節點並進行刪除操作時,要注意,children屬性是一個只讀屬性,並且它在子節點變化時會實時更新
// 拿到待刪除節點: var self = document.getElementById('to-be-removed'); // 拿到父節點: var parent = self.parentElement; // 刪除: var removed = parent.removeChild(self); removed === self; // true
2. example
<!DOCTYPE html> <html> <head> </script> </head> <body> <ul id="test-list"> <li>JavaScript</li> <li>Swift</li> <li>HTML</li> <li>ANSI C</li> <li>CSS</li> <li>DirectX</li> </ul> <script> var p= document.getElementById('test-list'); var length = p.children.length; var i=0; for(; i<length; ){ var li = p.children[i]; var text = li.innerText; if(text!=='JavaScript' && text!=='HTML' && text!=='CSS'){ p.removeChild(li); alert(p.children.toString()); length--; }else{ i++; } } // 測試: ;(function () { var arr, i, t = document.getElementById('test-list'); if (t && t.children && t.children.length === 3) { arr = []; for (i = 0; i < t.children.length; i ++) { arr.push(t.children[i].innerText); } if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) { alert('測試通過!'); } else { alert('測試失敗: ' + arr.toString()); } } else { alert('測試失敗!'); } })(); </script> </body> </html>
以上所述是小編給大家介紹的JavaScript中removeChild 方法開發示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!