Bagaimana untuk memadam elemen kanak-kanak dalam javascript-tutorial js-php.cn

Bagaimana untuk memadam elemen kanak-kanak dalam javascript

青灯夜游

Lepaskan： 2023-01-07 11:44:32

asal

10398 orang telah melayarinya

Dalam JavaScript, anda boleh menggunakan kaedah removeChild() untuk memadamkan elemen anak Kaedah ini boleh memadamkan nod daripada senarai nod anak bagi elemen yang ditentukan, iaitu, memadamkan elemen anak yang ditentukan format ialah "objek elemen induk. removeChild(elemen anak)".

Bagaimana untuk memadam elemen kanak-kanak dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

javascript memadamkan elemen kanak-kanak

Dalam javascript, anda boleh menggunakan kaedah removeChild() untuk memadamkan elemen kanak-kanak. Mari kita ketahui lebih lanjut mengenainya melalui contoh.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 2px dashed #006DAF;
				padding: 10px;
			}
			p{
				border: 2px dashed #006DAF;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div>div元素
			<h2>一个标题</h2>
			<p>一个段落</p>
		</div><br />
		<input id="btn" type="button" value="删除div中的子元素p">
	</body>
	<script>
		function deleteChild() {
			var div = document.querySelector("div");
			var p = document.querySelector("p");

			div.removeChild(p);

		}
		var btn = document.getElementById("btn").onclick = function() {
			deleteChild();
		}
	</script>

</html>

Salin selepas log masuk

Rendering:

Bagaimana untuk memadam elemen kanak-kanak dalam javascript

Penerangan:

The kaedah removeChild() boleh mengalih keluar nod daripada senarai nod anak. Penggunaannya adalah seperti berikut:

nodeObject.removeChild(node)

Salin selepas log masuk

Nod parameter ialah nod yang akan dipadamkan. Jika pemadaman berjaya, nod yang dipadam dikembalikan jika ia gagal, null dikembalikan.

Apabila nod dipadamkan menggunakan kaedah removeChild(), semua nod anak yang terkandung dalam nod akan dipadamkan pada masa yang sama.

Contoh 1

Dalam contoh di bawah tajuk tahap pertama dalam kotak merah akan dipadamkan apabila butang diklik.

<div id="red">
    <h1>红盒子</h1>
</div>
<div id="blue">蓝盒子</div>
<button id="ok">移动</button>
<script>
    var ok = document.getElementById ("ok");  //获取按钮元素的引用
    ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
        var red = document.getElementById ("red");  //获取红色盒子的引用
        var h1 = document.getElementsByTagName("h1")[0];  //获取标题元素的引用
        red.removeChild(h1);  //移出红盒子包含的标题元素
    }
</script>

Salin selepas log masuk

Contoh 2

Jika anda ingin memadamkan kotak biru, tetapi tidak dapat menentukan elemen induknya, anda boleh menggunakan atribut parentNode untuk mendapatkan rujukan elemen induk dengan cepat dan gunakan Rujukan ini untuk melaksanakan operasi padam.

var ok = document.getElementById ("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var blue= document.getElementById ("blue");  //获取蓝色盒子的引用
    var parent = blue.parentNode;  //获取蓝色盒子父元素的引用
    parent.removeChild(blue);  //移出蓝色盒子
}

Salin selepas log masuk

Jika anda ingin memasukkan nod yang dipadamkan ke lokasi lain dalam dokumen, anda boleh menggunakan kaedah removeChild() atau anda boleh menggunakan kaedah appendChild() dan insertBefore() untuk mencapai ini.

Contoh 3

Memadamkan nod adalah sama kerap digunakan seperti membuat dan memasukkan nod dalam operasi dokumen DOM Atas sebab ini, fungsi operasi nod pemadaman boleh dirangkumkan.

//封装删除节点函数
//参数：e表示预删除的节点
//返回值：返回被删除的节点，如果不存在指定的节点，则返回undefined值
function remove (e) {
    if (e) {
        var _e = e.parentNode.removeChild(e);
        return _e;
    }
    return undefined;
}

Salin selepas log masuk

Contoh 4

Jika anda ingin memadamkan semua nod anak di bawah nod yang ditentukan, kaedah enkapsulasi adalah seperti berikut:

//封装删除所有子节点的方法
//参数：e表示预删除所有子节点的父节点
function empty (e) {
    while (e.firstChild) {
        e.removeChild (e.firstChild);
    }
}

Salin selepas log masuk

[Pembelajaran yang disyorkan: Tutorial javascript lanjutan】

Atas ialah kandungan terperinci Bagaimana untuk memadam elemen kanak-kanak dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!