想要使用JavaScript删除DOM节点的所有子元素，可以使用removeChild()或remove()方法删除所有子节点；另一个方法是设置DOM节点的innerHTML= " "属性，它是一个空字符串，生成相同的输出。
下面我们通过代码示例来看看如何实现。
示例1：使用removeChild()方法
removeChild()方法可以从父节点删除子节点。
<!DOCTYPE html>
<meta charset="utf-8">
</head>
<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>
<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>
示例2：使用remove()方法
remove() 方法移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素；但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。
<!DOCTYPE html>
<meta charset="utf-8">
</head>
<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>
<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>
示例3：使用 innerHTML =“”属性
<!DOCTYPE html>
<meta charset="utf-8">
</head>
<ul style="border: 2px dashed #FE6368;">
<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>
<input id="btn" type="button" value="删除子节点">
</body>
<script>
function deleteChild() {
var e = document.querySelector("ul");
e.innerHTML = "";
var btn = document.getElementById("btn").onclick = function() {
deleteChild();
</script>
</html>
在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）： 1. 通过顶层document节点获取： （1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。 如今，已经出现了如prototype、Mootools等多个Jav
这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。
一个元素有多个子节点，因此删除哪个子节点必须要明确，如
今天又下雨，真的好烦啦！ ...
在
javascript操作
dom树的时候可能会经常遇到增加，
删除节点的事情，比如一个输入框后一个增加按钮，一个
删除按钮，点击增加就增加 个输入框，点击
删除就
删除对应的输入框。在一些js框架，如Prototype中，可以用element.remove()来
删除一个
节点，核心JS中并 没有这样的方法，IE中有这样一个方法:removeNode()，尝试运行
下面的代码
<div><input onclick="removeNode(this)" type="text" value="点击移除该输入框" /></div>
可以发现，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错
dom 删除所有子元素Given an item in the DOM, use querySelector() to identify it, like this:
给定DOM中的项目，请使用querySelector()进行标识，如下所示：
const item = document.querySelector('#itemId')then, to remove all its child...
