1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title>添加、删除</title>
    5.     <meta charset="utf-8" />
    6.     <style type="text/css">
    7.       html,body{
    8.           background-color:#ffffff;
    9.           width:100%;
    10.           height:100%;
    11.           overflow:hidden;
    12.       }
    13.       #stage{
    14.         margin:10px;
    15.         width:600px;
    16.         height:500px;
    17.       }
    18.     </style>
    19.     <body>
    20.       <div>
    21.         <button type="button" onclick="add()">添加图片</button>
    22.         <button type="button" onclick="del()">删除图片</button>
    23.       </div>
    24.       <div id='stage'>
    25.       </div>
    26.       <script type="text/javascript">
    27.         function add(){
    28.           //补全添加图片代码
    29.           var a = document.createElement("img");
    30.           a.src = "res/plane_blue_01.png";
    31.           a.className = "plane";
    32.           document.getElementById("stage").appendChild(a);
    33.         }
    34.         function del(){
    35.           //补全删除图片代码
    36.           //name里存储了所有的飞机图片，每次点击调用一次del函数name里的飞机图片先是刷新一下存储图片，后在删除
    37.           var name = document.getElementsByClassName("plane");  
    38.           document.getElementById("stage").removeChild(name[0]);
    39.         }
    40.       </script>
    41.     </body>
    42. </html>

    2021-09-26_172308.jpg点击添加图片，添加一个飞机图片；点击删除图片，删除页面上的一个飞机图片2021-09-26_172321.jpg