在 JavaScript 中删除 DOM 节点的所有子元素

可以使用removeChild()从父节点中删除子节点，并且可以使用remove() 删除节点本身。
另一种删除节点所有子节点的方法是设置它的innerHTML=””属性，它是一个空字符串，产生相同的输出。这种方法不是首选使用。

示例 1：使用“removeChild()” 。

  

    
    
    
    
    Document

  

    
        Get Up in Morning
        Do some exercise
        Get Ready for school
        Study Daily
        Do homework
    
    


    function deleteChild() {
        var e = document.querySelector("ul");
        
        //e.firstElementChild can be used.
        var child = e.lastElementChild; 
        while (child) {
            e.removeChild(child);
            child = e.lastElementChild;
        }
    }
    var btn = document.getElementById(
    "btn").onclick = function() {
        deleteChild();
    }

  

输出：
点击按钮前：

点击按钮后：

示例 2：使用innerHTML=""属性。

  

    
    
    
    
      Document
  

  

    
        Get Up in Morning
        Do some exercise
        Get Ready for school
        Study Daily
        Do homework
    
    


    function deleteChild() {
        var e = document.querySelector("ul");
        e.innerHTML = "";
    }
    var btn = document.getElementById(
      "btn").onclick = function() {
        deleteChild();
    }

  

输出：
点击按钮前：

点击按钮后：

示例 3使用“removeChild()” 。

  

    
    
    
    Document

  

    
        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();
    }

  

输出：
点击按钮前：

点击按钮后：