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-y:auto;
    12.              overflow-x:hidden;
    13.         }
    14.         #stage{
    15.         margin:10px;
    16.         width:600px;
    17.         height:500px;
    18.         }
    19.         button{
    20.             width:100px;
    21.             height:35px;
    22.             background:#158db4;
    23.             color:#fff;
    24.         }
    25.         .p{
    26.             width:30px;
    27.             height:25px;
    28.             background:#f2f2f2;
    29.             text-align:center;
    30.         }
    31.     </style>
    32.     <body>
    33.       <div>
    34.         <button type="button" onclick="add()">添加序号</button>
    35.         <button type="button" onclick="del()">删除序号</button>
    36.       </div>
    37.       <div id='stage'>
    39.       </div>
    40.       <script type="text/javascript">
    41.         var a = 0;
    42.         function add(){
    43.             //补全添加p标签代码
    44.             a++;
    45.             var p = document.createElement("p");
    46.             document.getElementById("stage").appendChild(p);
    47.             p.innerText = a;
    48.             p.className = "p";
    50.         }
    51.         function del(){
    52.             //补全删除p标签代码
    53.             var name = document.getElementsByClassName("p");
    54.             document.getElementById("stage").removeChild(name[name.length-1]);
    55.             a = name.length;
    56.         }
    57.       </script>
    58.     </body>
    59. </html>

    2021-09-26_173758.jpg2021-09-26_173749.jpg2021-09-26_173900.jpg