1). removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>删除节点</title> 6 <script> 7 window.onload=function(){ 8 var bjNode=document.getElementById("bj"); 9 // bjNode.parentNode.removeChild(bjNode); 10 11 12 var liNodes=document.getElementsByTagName("li"); 13 for(var i=0;i<liNodes.length;i++){ 14 liNodes[i].onclick=function(){ 15 var flag=confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？") 16 if(flag){ 17 this.parentNode.removeChild(this); 18 } 19 } 20 } 21 } 22 </script> 23 </head> 24 <body> 25 <p>你喜欢哪个城市?</p> 26 <ul id="city"><li id="bj" name="BeiJing">北京</li> 27 <li>上海</li> 28 <li>东京</li> 29 <li>首尔</li> 30 </ul> 31 32 <br><br> 33 <p>你喜欢哪款单机游戏?</p> 34 <ul id="game"> 35 <li id="rl">红警</li> 36 <li>实况</li> 37 <li>极品飞车</li> 38 <li>魔兽</li> 39 </ul> 40 41 <br><br> 42 gender: 43 <input type="radio" name="gender" value="male"/>Male 44 <input type="radio" name="gender" value="female"/>Female 45 46 <br><br> 47 name: <input type="text" name="username" value="atguigu"/> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 《title>删除节点-例子</title>
6 <script type="text/javascript"> 7 /* 8 * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数: 9 * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的 10 * 第一个 td 子节点的文本值, 且要去除前后空格. 11 * 2. 若点击 "确认" , 则删除 a 节点的所在的 行 12 * 13 * 注意: 14 * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为 15 * 2. tr 的直接父节点为 tbody, 而不是 table 16 * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.*/ 17 18 window.onload=function(){ 19 var aNodes=document.getElementById("employeetable").getElementsByTagName("a"); 20 for(var i=0;i<aNodes.length;i++){ 21 aNodes[i].onclick=function(){ 22 23 var trNode=this.parentNode.parentNode; 24 var textContent=trNode.getElementsByTagName("td")[0].firstChild.nodeValue; 25 textContent=trim(textContent); 26 var flag=confirm("确定要删除"+textContent+"的信息吗？"); 27 if(flag){ 28 trNode.parentNode.removeChild(trNode); 29 } 30 return false; 31 } 32 } 33 //除去空格 34 function trim(str){ 35 var reg = /^s*|s*$/g; 36 return str.replace(reg, ""); 37 } 38 39 } 40 </script> 41 </head> 42 <body> 43 44 <center> 45 <br> <br> 添加新员工 <br> <br> name: <input type="text" 46 name="name" id="name" /> email: <input type="text" 47 name="email" id="email" /> salary: <input type="text" 48 name="salary" id="salary" /> <br> <br> 49 <button id="addEmpButton" value="abc">Submit</button> 50 <br> <br> 51 <hr> 52 <br> <br> 53 <table id="employeetable" border="1" cellpadding="5" cellspacing=0> 54 <tbody> 55 <tr> 56 <th>Name</th> 57 <th>Email</th> 58 <th>Salary</th> 59 <th> </th> 60 </tr> 61 <tr> 62 <td>a</td> 63 <td>a@tom.com</td> 64 <td>5000</td> 65 <td><a href="deleteEmp?id=001">删除</a></td> 66 </tr> 67 <tr> 68 <td> 69 b 70 </td> 71 <td>b@sohu.com</td> 72 <td>8000</td> 73 <td><a href="deleteEmp?id=002">删除</a></td> 74 </tr> 75 <tr> 76 <td>c</td> 77 <td>c@tom.com</td> 78 <td>10000</td> 79 <td><a href="deleteEmp?id=003">删除</a></td> 80 </tr> 81 <tr> 82 <td>d</td> 83 <td>d@tom.com</td> 84 <td>10000</td> 85 <td><a href="deleteEmp?id=003">删除</a></td> 86 </tr> 87 <tr> 88 <td>f</td> 89 <td>f@tom.com</td> 90 <td>10000</td> 91 <td><a href="deleteEmp?id=003">删除</a></td> 92 </tr> 93 </tbody> 94 </table> 95 </center> 96 </body> 97 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>删除添加节点-例子</title> 6 <script type="text/javascript"> 7 /* 8 为 #addEmpButton 添加 onclick 响应函数: 9 * 1. 获取 #name, #email, #salary 的文本框的值 10 * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td 11 * 节点价位 tr 节点的子节点 12 <tr> 13 <td>Tom</td> 14 <td>tom@tom.com</td> 15 <td>5000</td> 16 </tr> 17 * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td> 18 * 4. 把 3 创建的 td 也加为 tr 的子节点. 19 * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点. 20 * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能. 21 * 22 * 23 */ window.onload=function(){ 24 25 //定义个删除方法 26 function removeTr(aNode){ 27 var trNode=aNode.parentNode.parentNode; 28 var textContent=trNode.getElementsByTagName("td")[0].firstChild.nodeValue; 29 textContent=trim(textContent); 30 var flag=confirm("确定要删除"+textContent+"的信息吗？"); 31 if(flag){ 32 trNode.parentNode.removeChild(trNode); 33 } 34 return false; 35 } 36 //点击添加按钮，提交信息到表格里 37 document.getElementById("addEmpButton").onclick=function(){ 38 //获取输入信息后的表单的值 39 var nameVal=document.getElementById("name").value; 40 var emailVal=document.getElementById("email").value; 41 var salaryVal=document.getElementById("salary").value; 42 //创建TD 并向其中添加文本值 43 var nameTd=document.createElement("td"); 44 nameTd.appendChild(document.createTextNode(nameVal)); 45 46 var emailTd=document.createElement("td"); 47 emailTd.appendChild(document.createTextNode(emailVal)); 48 49 var salaryTd=document.createElement("td"); 50 salaryTd.appendChild(document.createTextNode(salaryVal)); 51 //创建tr 52 var tr=document.createElement("tr"); 53 //向tr中添加td 54 tr.appendChild(nameTd); 55 tr.appendChild(emailTd); 56 tr.appendChild(salaryTd); 57 58 //创建a 59 var aNode=document.createElement("a"); 60 aNode.href="deleteEmp?id=xxx"; 61 aNode.appendChild(document.createTextNode("删除")); 62 var aTd=document.createElement("td"); 63 aTd.appendChild(aNode); 64 tr.appendChild(aTd); 65 66 aNode.onclick=function(){ 67 removeTr(this); 68 return false; 69 } 70 //把tr添加到表格中 71 document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(tr); 72 } 73 //除去空格 74 function trim(str){ 75 var reg = /^s*|s*$/g; 76 return str.replace(reg, ""); 77 } 78 //表格中原有的信息 点击后也删除 79 var aNodes = document.getElementById("employeetable") 80 .getElementsByTagName("a"); 81 for(var i = 0; i < aNodes.length; i++){ 82 aNodes[i].onclick = function(){ 83 removeTr(this); 84 return false; 85 } 86 } 87 88 } 89 </script> 90 </head> 91 <body> 92 93 <center> 94 <br> <br> 添加新员工 <br> <br> name: <input type="text" 95 name="name" id="name" /> email: <input type="text" 96 name="email" id="email" /> salary: <input type="text" 97 name="salary" id="salary" /> <br> <br> 98 <button id="addEmpButton" value="abc">Submit</button> 99 <br> <br> 100 <hr> 101 <br> <br> 102 <table id="employeetable" border="1" cellpadding="5" cellspacing=0> 103 <tbody> 104 <tr> 105 <th>Name</th> 106 <th>Email</th> 107 <th>Salary</th> 108 <th> </th> 109 </tr> 110 <tr> 111 <td>a</td> 112 <td>a@tom.com</td> 113 <td>5000</td> 114 <td><a href="deleteEmp?id=001">删除</a></td> 115 </tr> 116 <tr> 117 <td> 118 b 119 </td> 120 <td>b@sohu.com</td> 121 <td>8000</td> 122 <td><a href="deleteEmp?id=002">删除</a></td> 123 </tr> 124 <tr> 125 <td>c</td> 126 <td>c@tom.com</td> 127 <td>10000</td> 128 <td><a href="deleteEmp?id=003">删除</a></td> 129 </tr> 130 <tr> 131 <td>d</td> 132 <td>d@tom.com</td> 133 <td>10000</td> 134 <td><a href="deleteEmp?id=004">删除</a></td> 135 </tr> 136 <tr> 137 <td>f</td> 138 <td>f@tom.com</td> 139 <td>10000</td> 140 <td><a href="deleteEmp?id=005">删除</a></td> 141 </tr> 142 </tbody> 143 </table> 144 </center> 145 </body> 146 </html>