Penjelasan terperinci tentang kemahiran penggunaan_javascript fungsi removeChild() JavaScript-tutorial js-php.cn

Penjelasan terperinci tentang kemahiran penggunaan_javascript fungsi removeChild() JavaScript

WBOY

Lepaskan： 2016-05-16 15:23:09

asal

1720 orang telah melayarinya

Fungsi removechild boleh memadamkan elemen anak yang ditentukan bagi elemen induk.

Jika fungsi ini berjaya memadamkan nod anak, ia mengembalikan nod yang dipadamkan, jika tidak ia mengembalikan nod.

Struktur tatabahasa:

fatherObj.removeChild(childrenObj)

Penjelasan parameter:

1.fatherObj: Objek elemen elemen anak untuk dipadamkan.
2.childrenObj: objek elemen kanak-kanak yang akan dipadamkan.

Arahan khas:

Dalam Firefox, Google dan penyemak imbas di atas IE8, ruang kosong juga dianggap sebagai nod teks, tetapi dalam penyemak imbas di bawah IE8 dan IE8, nod teks kosong akan diabaikan untuk butiran, sila rujuk Cara Mendapatkan Nod Kanak-kanak dan Nod Induk Elemen dalam bab JavaScript.

Contoh kod:

Contoh 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var lis=obox.getElementsByTagName("li");
 obox.removeChild(lis[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>脚本之家一</li>
 <li>脚本之家二</li>
 <li>脚本之家三</li>
 <li>脚本之家四</li>
</ul>
</body>
</html>

Salin selepas log masuk

Kod di atas boleh memadamkan elemen li kedua dalam elemen anak kotak.

Contoh 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var liArray=[];
 var y=0;
 var childNodes=obox.childNodes;
 for(var i=0;i<childNodes.length;i++){
  if(childNodes[i].nodeType==1){
   liArray[y]=childNodes[i];
   y=y+1;
  }
 }
 obox.removeChild(liArray[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>脚本之家一</li>
 <li>脚本之家二</li>
 <li>脚本之家三</li>
 <li>脚本之家四</li>
</ul>
</body>
</html>

Salin selepas log masuk

Kod di atas boleh memilih nod elemen daripada semua nod anak dalam kotak, kemudian letakkan nod elemen ke dalam tatasusunan, dan kemudian padamkan nod elemen kedua.

Ringkasan:

alih keluarChild()

Fungsi ini adalah untuk mendapatkan elemen induk elemen dan memadamkannya. Sintaksnya ialah: parent.removeChild(child);

Kadangkala kita mahu memadam tanpa menyentuh elemen induk. Tetapi DOM ialah mekanisme ini, dan elemen dan elemen induk mesti jelas sebelum pemadaman boleh dijalankan. Apabila memasukkan elemen untuk dipadamkan, kami juga boleh melakukan operasi pemadaman dan menggunakan atribut parentNodenya untuk mencari elemen induk:

var child=document.getElementById(p1);
child.parentNode.removeChild(child);

Salin selepas log masuk

Nota: jquery juga mempunyai fungsi yang sepadan dengan removeChild: remove() dan empty()

remove(): merujuk kepada pemadaman kedua-duanya sendiri dan sub-elemennya

kosong(): memadamkan elemen kanak-kanak