怎么在javascript中删除节点

2023-06-14 09:06:35 454人浏览独家记忆

摘要

这篇文章给大家介绍怎么在javascript中删除节点，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。方法1：使用remove()删除节点remove()方法可用于删除父节点上的所有元素，包括所有文本和子节点。示例：删除

这篇文章给大家介绍怎么在javascript中删除节点，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

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

效果图：

怎么在javascript中删除节点

方法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中删除节点