在 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>
效果图:
来源: http://www.css88.com/qa/javascript/11309.html