node.removeChild(child) 从DOM中删除一个子节点，返回删除的节点
<body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> var btn = document.querySelector("button"); var ul = document.querySelector("ul"); btn.onclick = function () { if (ul.children.length == 0) { this.disabled = true; alert("没有节点了"); } else { //node.removeChild(child) 删除一个子节点 ul.removeChild(ul.children[0]); } }; </script> </body>分析：
当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接需要把所有的链接获取过来，当我们点击当前的链接时，删除当前连接所在的li阻止链接跳转需要添加javascript(0),或者 javascript:: <body> <textarea name="" id=""></textarea> <button>发布</button> <ul></ul> <script> var btn = document.querySelector("button"); var text = document.querySelector("textarea"); var ul = document.querySelector("ul"); btn.onclick = function () { if (text.value == null) { alert("您输入的信息为空"); return false; } else { var li = document.createElement("li"); var a = document.createElement("a"); li.innerHTML = text.value + "<a href = 'javascript::'>删除</a>"; // href = 'javascript::'表示这是一个不会跳转的链接 ul.insertBefore(li, ul.children[0]); //删除元素 删除的是当前链接的li 它的父亲 var as = document.querySelectorAll("a"); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { //当前a所在的li this.parentNode ul.removeChild(this.parentNode); }; } } }; </script> </body>node.cloneNode（）方法返回调用该节点的一个副本，也称为克隆节点/拷贝节点 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点 如果括号参数为true，则是深拷贝，即不仅克隆复制节点本身，也克隆里面的子节点
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var ul = document.querySelector("ul"); var lili = ul.children[0].cloneNode(); //复制ul里面的第一个li，传递给lili 但没有内容，因为是浅拷贝 ul.appendChild(lili);//把lili添加到ul的后面 </script> </body>分析：
因为里面的数据都是动态的，需要js动态生成，这里模拟好数据，自己定义好数据，数据采取对象形式存储所有的数据都放在tbody里面的行里因为行很多，需要循环创建多个行，根据对象的长度创建（对应人数）每个行里面又有多个单元格（对应里面的数据），采取遍历对象的方式循环创建多个单元格（ for ( k in obj) 形式)，并把数据存入（双重for循环）最后一列单元格是删除，需要单独创建单元格 <body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> <script> //1.先准备好学生的数据 var datas = [ { name: "周九良", subject: "javascript", score: 100, }, { name: "朱一龙", subject: "javascript", score: 100, }, { name: "张新成", subject: "javascript", score: 100, }, { name: "许嵩", subject: "javascript", score: 100, }, ]; //1.往tbody里面创建行，根据人数来创建（数据的长度） var tbody = document.querySelector("tbody"); for (var i = 0; i < datas.length; i++) { //创建tr行 var tr = document.createElement("tr"); tbody.appendChild(tr); //3.行里面创建单元格(跟数据有关系的三个单元格) tr 单元格的数量取决于每个对象里面的属性个数 //遍历对象 datas[i] for (k in datas[i]) { //k 得到的是属性名 datas[i][k]得到的是属性值 //创建单元格 var td = document.createElement("td"); //把对象里面的属性值 给td td.innerHTML = datas[i][k]; //把对象里面的属性值 datas[i][k]给 td tr.appendChild(td); } //3.创建有删除2个字的单元格 var td = document.createElement("td"); td.innerHTML = "<a href = 'javascript::'>删除</a>"; tr.appendChild(td); } //4.点击删除按钮时 删除整个行 var as = document.querySelectorAll("a"); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { //点击a 删除当前a所在的行 当前a所在的li this.parentNode tbody.removeChild(this.parentNode.parentNode); //删除的是a父节点的父节点 }; } </script> </body>