JavaScript中如何删除节点？

2019-08-17阅读(7360)

在JavaScript中可以使用removeChild()或remove()方法来删除节点。下面本篇文章就来给大家具体介绍一下，希望对大家有所帮助。

方法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>

效果图：

JavaScript中如何删除节点？相关推荐

html页面怎么删除cookie,javascript中怎么删除cookie？
当web服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切.Cookie是为了解决"如何记住用户信息"而发明的.有时为了我们的信息安全需要删除Cookie,我们该如何做呢 ...
在 JavaScript 中实现删除前弹出对话框确认删除
确认删除按钮工作,如果用户选择"Ok",则href重定向到" url_to_delete",否则如果单击"Cancel"则不会发生任何反应. ...
JavaScript中如何删除数组中指定元素
js中删除数组中指定元素大致有以下三中方法. 1.使用for循环遍历,根据条件判断. for (let i = 0; i < array.length; i++) {if (array[i] = ...
JavaScript中DOM的层次节点(一)
DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...
js向html中指定位置追加文本,JavaScript中如何添加文本节点？
在javascript中提供了很多操作DOM文档的方法,当然也包括创建一个节点,下面我们来看一下JavaScript如何创建一个创建一个文本节点(text). JavaScript中添加文本节点的方法 ...
如何在JavaScript中实现链接列表
If you are learning data structures, a linked list is one data structure you should know. If you do ...
Jquery删除节点元素
删除节点的操作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
Javascript中关于监听DOM元素状态的方法使用
Javascript中关于监听DOM元素状态的方法使用 MutationObserver MutationObserver是针对DOM元素的观察器,观察它体内增加/减少子(爷孙)节点,或者子节点的属性 ...
JavaScript中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
zTree 异步删除节点操作
最近考虑使用 zTree 自带的编辑功能,但发现 beforeRemove 函数并不提供针对异步操作(如 AJAX.setTimeout)时的回调函数. 其实,要实现像这种需要根据异步返回结果来判断是 ...

JavaScript中如何删除节点？

JavaScript中如何删除节点？相关推荐

最新文章

热门文章