快捷導(dǎo)航

js removeChild 方法深入理解

更新時(shí)間：2016年08月16日 08:52:21 投稿：jingxian

下面小編就為大家?guī)硪黄猨s removeChild 方法深入理解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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++;
  }
}
// 測(cè)試:
;(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('測(cè)試通過!');
    }
    else {
      alert('測(cè)試失敗: ' + arr.toString());
    }
  }
  else {
    alert('測(cè)試失敗!');
  }
})();
</script>
</body>
</html>

以上這篇js removeChild 方法深入理解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)百度搜索接口及鏈接功能實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)百度搜索接口及鏈接功能實(shí)例代碼,需要的朋友可以參考下
2018-02-02
微信小程序事件綁定基本語法示例詳解
這篇文章主要介紹了微信小程序事件綁定基本語法示例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-04-04
原生JS實(shí)現(xiàn)百葉窗特效
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)百葉窗特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
js實(shí)現(xiàn)錄音上傳功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JS獲取當(dāng)前網(wǎng)址、主機(jī)地址項(xiàng)目根路徑
本文為大家提供JS如何獲取當(dāng)前網(wǎng)址、主機(jī)地址之后的目錄及項(xiàng)目根路徑的方法，喜歡的朋友可以收藏下
2013-11-11
js限制文本框只能輸入中文的方法
這篇文章主要介紹了js限制文本框只能輸入中文的方法,涉及javascript正則匹配及鼠標(biāo)事件的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
JavaScript中不可忽略的Symbol的盤點(diǎn)
Symbol類型的出現(xiàn),為每個(gè)屬性賦予了獨(dú)一無二的標(biāo)識(shí)符,無論項(xiàng)目多么復(fù)雜,Symbol都能確保屬性鍵的絕對(duì)唯一性,下面我們就來看看JavaScript中那些不可忽略的Symbol吧
2024-12-12
javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問題
今天小編就為大家分享一篇關(guān)于javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問題，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
JavaScript操作Oracle數(shù)據(jù)庫(kù)示例
這篇文章主要介紹了JavaScript操作Oracle數(shù)據(jù)庫(kù)示例,本文使用ActiveXObject實(shí)現(xiàn)訪問Oracle數(shù)據(jù)庫(kù),需要的朋友可以參考下
2015-03-03
ES6中解構(gòu)賦值實(shí)現(xiàn)變量批量賦值解放雙手
這篇文章主要為大家介紹了ES6中解構(gòu)賦值實(shí)現(xiàn)變量批量賦值解放雙手，變量的解構(gòu)賦值，聽起來很復(fù)雜，簡(jiǎn)單點(diǎn)說可以理解成批量操作變量賦值
2022-04-04