Rumah > Artikel > hujung hadapan web > javascript怎么删除节点
javascript怎么删除节点
- 藏色散人asal
- 2021-03-30 14:34:456076semak imbas
javascript删除节点的方法：1、使用remove()方法删除父节点上的所有元素，包括所有文本和子节点；2、使用removeChild()方法删除父节点上的一个子节点。
本文操作环境：windows7系统、javascript1.8.5版，DELL G3电脑。
方法1：使用remove()删除节点
remove()方法可用于删除父节点上的所有元素，包括所有文本和子节点。
示例：删除ul节点 上的所有子节点li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul style="border: 2px dashed #006DAF;">
<li>Get Up in Morning</li>
<li>Do some exercise</li>
<li>Get Ready for school</li>
<li>Study Daily</li>
<li>Do homework</li>
</ul>
<input id="btn" type="button" value="删除子节点">
</body>
<script>
function deleteChild() {
var e = document.querySelector("ul");
var first = e.firstElementChild;
while (first) {
first.remove();
first = e.firstElementChild;
}
}
var btn = document.getElementById("btn").onclick = function() {
deleteChild();
}
</script>
</html>效果图：
方法2：使用removeChild()删除节点
removeChild() 方法用于删除父节点上的一个子节点。
示例：删除ul节点 上的所有子节点li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul style="border: 2px dashed #D58C00;">
<li>Get Up in Morning</li>
<li>Do some exercise</li>
<li>Get Ready for school</li>
<li>Study Daily</li>
<li>Do homework</li>
</ul>
<input id="btn" type="button" value="删除子节点">
</body>
<script>
function deleteChild() {
var e = document.querySelector("ul");
var child = e.lastElementChild;
while (child) {
e.removeChild(child);
child = e.lastElementChild;
}
}
var btn = document.getElementById("btn").onclick = function() {
deleteChild();
}
</script>
</html>效果图：
【推荐学习：js基础教程】
Atas ialah kandungan terperinci javascript怎么删除节点. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：javascript怎么去掉回车Artikel seterusnya：javascript怎么删除行