[TOC] # 5.5删除节点 node.removeChild(child)[//ul.removeChild](https://ul.removechild/)(ul.children\[0\]) 删除ul 的数组下第一个索引号0 ~~~ node.removeChild(child) //删去父节点下的某个子节点 node.removeChild()方法从 DOM中删除一个子节点，返回删除的节点。 ~~~  ~~~ //删除节点 //1.获取元素 var ul = document.querySelector('ul') var btn = document.querySelector('button') //2. 删除元素 node.remove Child(child) // ul.removeChild(ul.children[0]) //3.点击按钮依次删除里面的孩子 btn.onclick = function() { if (ul.children.length == 0) { this.disabled = true; // 为0 禁用按钮 } else { ul.removeChild(ul.children[0]) } } ~~~ # 案例：删除留言 案例分析 ①当我们把文本域里面的值赋值给Ii的时候,多添加一个删除的链接 ②需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的Ii ③**阻止链接跳转**需要添加**javascriptvoid(0);或者javascript:;** # 代码实验  # 案例：动态生成表格  ## 案例分析  ## 代码实验 步骤一：创建数据组 （数组里{ } 对应一个人）  步骤二：根据数组数量创建相对应的行 （遍历数组 遍历对象 遍历属性 遍历对象属性） td.页面属性='添加的内容' ~~~ // 2.往tbody 里面创建行: 有几个人(通过数组的长度)我们就创建几行 var tbody = document.querySelector( ' tbody' ); //外面的for循环管行tr for (var i = 0; i < datas.length; i++) { //遍历数组 获取数组数量 生成相对应的东西 //1.创建tr行 var tr = document.createElement( 'tr' ); tbody.appendChild(tr); //父节点下添加子节点 （tr） //2.行里面创建单元格(跟数据有关系的3个单元格)td单元格的数量取决于每个对象里面的属性个数 for循环遍历对象datas [i] for (var k in datas[i]) { //里面的for循环管列td //创建单元格 var td = document . createElement('td' ); //把对象里面的属性值datas[i][k] 给td // console.1og(datas[i][k]); td.innerHTML = datas[i][k ] ; //获取的属性值 直接书写在页面 （实验重点） tr.appendChild(td); //父节点下添加子节点 (td) } // 3.创建有删除2个字的单元格 var td = document . createElement('td' ); td.innerHTML = '<a href="javascript:;">删除 </a>'; tr.appendChild(td); } ~~~ // 4.删除操作开始 ~~~ //获取所有a标签 var as = document.querySelectorAll('a'); 遍历 绑定所有事件 for (var i = 0; i < as.length; i++) { as[i].onclick = function() { //点击a删除当前a所在的行(链接的爸爸的爸爸) node.removeChild( child) tbody.removeChild( this.parentNode.parentNode ) } } ~~~