在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素。

语法：

A.removeChild(B);

说明：

A表示父元素，B表示父元素内部的某个子元素。

举例：删除最后一个子元素

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var oUl = document.getElementById("list");
                //删除最后一个子元素
                oUl.removeChild(oUl.lastElementChild);            
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input id="btn" type="button" value="删除" />
</body>
</html>

浏览器预览效果如下图所示。

分析：

oUl.removeChild(oUl.lastElementChild);表示删除ul中最后一个li元素，其中oUl.lastElementChild表示ul中的最后一个子元素。如果想要删除第一个子元素，可以使用以下代码来实现：

oUl.removeChild(oUl.firstElementChild);

那么如果想要删除第2个子元素或者任意一个子元素，该怎么做呢？这就需要我们学到“10.4 DOM遍历”这一节才知道。

上面是删除一个子元素的情况，假如我们想要把整个列表删除，又该如何实现呢？很简单啦，直接对ul元素进行removeChild()操作就可以了，实现代码如下。

举例：删除整个列表

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var oUl = document.getElementById("list");
                document.body.removeChild(oUl);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input id="btn" type="button" value="删除" />
</body>
</html>

浏览器预览效果如下图所示。

分析：

我们点击【删除】按钮后，整个列表都被删除了。从上面几个例子，我们可以很清楚地知道：在使用removeChild()方法删除元素之前，我们必须找到2个元素。