动态表格的添加和删除

效果图：

添加

删除

代码如下：

//css代码
#btn {
        font-size: 20px;
      }
      #box {
        width: 100px;
        height: 400px;
        border: 1px solid black;
      }
//html代码
<button id="btn">添加</button>
    <div id="box"></div>
//js代码
// 获取元素
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    console.log(btn, box);
    var i = 1;
    //给按钮添加点击事件
      btn.onclick = function () {
      var tab = document.createElement("table");
      box.appendChild(tab);
      tab.border = 2;
      var tr = document.createElement("tr");
      tab.append(tr);
      var td1 = document.createElement("td");
      tr.append(td1);
      td1.innerText = i;
      var td2 = document.createElement("td");
      tr.append(td2);
      var bon = document.createElement("button");
      td2.append(bon);
      bon.innerText = "删除";
      td2.onclick = function () {
        tab.removeChild(this.parentElement);
      };
      i++;
    };