在JavaScript中可以使用removeChild()或remove()方法来删除节点。下面本篇文章就来给大家具体介绍一下,希望对大家有所帮助。
方法1:使用remove()删除节点
remove()方法可用于删除父节点上的所有元素,包括所有文本和子节点。
示例:删除ul节点 上的所有子节点li
- Get Up in Morning
- Do some exercise
- Get Ready for school
- Study Daily
- Do homework
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();
}
效果图:
方法2:使用removeChild()删除节点
removeChild() 方法用于删除父节点上的一个子节点。
示例:删除ul节点 上的所有子节点li
- Get Up in Morning
- Do some exercise
- Get Ready for school
- Study Daily
- Do homework
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();
}
效果图: