JavaScript中removeChild 方法開發(fā)示例代碼
1. 概述
刪除后的節(jié)點(diǎn)雖然不在文檔樹中了,但其實(shí)它還在內(nèi)存中,可以隨時(shí)再次被添加到別的位置。
當(dāng)你遍歷一個(gè)父節(jié)點(diǎn)的子節(jié)點(diǎn)并進(jìn)行刪除操作時(shí),要注意,children屬性是一個(gè)只讀屬性,并且它在子節(jié)點(diǎn)變化時(shí)會(huì)實(shí)時(shí)更新
// 拿到待刪除節(jié)點(diǎn): var self = document.getElementById('to-be-removed'); // 拿到父節(jié)點(diǎn): 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 方法開發(fā)示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Javascript removeChild()刪除節(jié)點(diǎn)及刪除子節(jié)點(diǎn)的方法
- JavaScript的removeChild()函數(shù)用法詳解
- javascript刪除元素節(jié)點(diǎn)removeChild()用法實(shí)例
- js使用removeChild方法動(dòng)態(tài)刪除div元素
- javascript移出節(jié)點(diǎn)removeChild()使用介紹
- javascript removeChild 導(dǎo)致的內(nèi)存泄漏
- js removeChild 障眼法 可能出現(xiàn)的錯(cuò)誤
- javascript removeChild 使用注意事項(xiàng)
- js removeChild 方法深入理解
相關(guān)文章
解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁面
這篇文章主要介紹在微信瀏覽器Javascript無法使用window.location.reload()刷新頁面的解決方法,比較實(shí)用,需要的朋友可以參考下。2016-06-06Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11Three.js+React實(shí)現(xiàn)帶火焰效果的艾爾登法環(huán)
《艾爾登法環(huán)》是最近比較火的一款游戲,觀察可以發(fā)現(xiàn)它的?Logo?是由幾個(gè)圓弧和線段構(gòu)成。本文使用?React?+?Three.js?技術(shù)棧,實(shí)現(xiàn)具有火焰效果艾爾登法環(huán)?Logo,感興趣的可以了解一下2022-03-03firefox火狐瀏覽器與與ie兼容的2個(gè)問題總結(jié)
這幾天遇到幾個(gè)頭疼的火狐與ie兼容問題整理下來,希望對需要的朋友有所幫助。2010-07-07JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫
這篇文章主要介紹了JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07ES6中async函數(shù)與await表達(dá)式的基本用法舉例
async和await是我們進(jìn)行Promise時(shí)的一個(gè)語法糖,async/await為了讓我們書寫代碼時(shí)更加流暢,增強(qiáng)了代碼的可讀性,下面這篇文章主要給大家介紹了關(guān)于ES6中async函數(shù)與await表達(dá)式的基本用法,需要的朋友可以參考下2022-07-07tsc性能優(yōu)化Project References使用詳解
這篇文章主要為大家介紹了tsc性能優(yōu)化Project References使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11淺談addEventListener和attachEvent的區(qū)別
下面小編就為大家?guī)硪黄獪\談addEventListener和attachEvent的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07