1). removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除节点</title>
<script>
window.onload=function(){
var bjNode=document.getElementById("bj");
// bjNode.parentNode.removeChild(bjNode); var liNodes=document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++){
liNodes[i].onclick=function(){
var flag=confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？")
if(flag){
this.parentNode.removeChild(this);
}
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>*飞车</li>
<li>魔兽</li>
</ul> <br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female <br><br>
name: <input type="text" name="username" value="atguigu"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
《title>删除节点-例子</title>
<script type="text/javascript">
/*
* 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
* 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
* 第一个 td 子节点的文本值, 且要去除前后空格.
* 2. 若点击 "确认" , 则删除 a 节点的所在的 行
*
* 注意:
* 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
* 2. tr 的直接父节点为 tbody, 而不是 table
* 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.*/ window.onload=function(){
var aNodes=document.getElementById("employeetable").getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++){
aNodes[i].onclick=function(){ var trNode=this.parentNode.parentNode;
var textContent=trNode.getElementsByTagName("td")[0].firstChild.nodeValue;
textContent=trim(textContent);
var flag=confirm("确定要删除"+textContent+"的信息吗？");
if(flag){
trNode.parentNode.removeChild(trNode);
}
return false;
}
}
//除去空格
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
} }
</script>
</head>
<body> <center>
<br> <br> 添加新员工 <br> <br> name: <input type="text"
name="name" id="name" /> email: <input type="text"
name="email" id="email" /> salary: <input type="text"
name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button>
<br> <br>
<hr>
<br> <br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>a</td>
<td>a@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">删除</a></td>
</tr>
<tr>
<td>
b
</td>
<td>b@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">删除</a></td>
</tr>
<tr>
<td>c</td>
<td>c@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">删除</a></td>
</tr>
<tr>
<td>d</td>
<td>d@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">删除</a></td>
</tr>
<tr>
<td>f</td>
<td>f@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">删除</a></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除添加节点-例子</title>
<script type="text/javascript">
/*
为 #addEmpButton 添加 onclick 响应函数:
* 1. 获取 #name, #email, #salary 的文本框的值
* 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
* 节点价位 tr 节点的子节点
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
</tr>
* 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>
* 4. 把 3 创建的 td 也加为 tr 的子节点.
* 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
* 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能.
*
*
*/ window.onload=function(){ //定义个删除方法
function removeTr(aNode){
var trNode=aNode.parentNode.parentNode;
var textContent=trNode.getElementsByTagName("td")[0].firstChild.nodeValue;
textContent=trim(textContent);
var flag=confirm("确定要删除"+textContent+"的信息吗？");
if(flag){
trNode.parentNode.removeChild(trNode);
}
return false;
}
//点击添加按钮，提交信息到表格里
document.getElementById("addEmpButton").onclick=function(){
//获取输入信息后的表单的值
var nameVal=document.getElementById("name").value;
var emailVal=document.getElementById("email").value;
var salaryVal=document.getElementById("salary").value;
//创建TD 并向其中添加文本值
var nameTd=document.createElement("td");
nameTd.appendChild(document.createTextNode(nameVal)); var emailTd=document.createElement("td");
emailTd.appendChild(document.createTextNode(emailVal)); var salaryTd=document.createElement("td");
salaryTd.appendChild(document.createTextNode(salaryVal));
//创建tr
var tr=document.createElement("tr");
//向tr中添加td
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd); //创建a
var aNode=document.createElement("a");
aNode.href="deleteEmp?id=xxx";
aNode.appendChild(document.createTextNode("删除"));
var aTd=document.createElement("td");
aTd.appendChild(aNode);
tr.appendChild(aTd); aNode.onclick=function(){
removeTr(this);
return false;
}
//把tr添加到表格中
document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(tr);
}
//除去空格
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
//表格中原有的信息 点击后也删除
var aNodes = document.getElementById("employeetable")
.getElementsByTagName("a");
for(var i = 0; i < aNodes.length; i++){
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
} }
</script>
</head>
<body> <center>
<br> <br> 添加新员工 <br> <br> name: <input type="text"
name="name" id="name" /> email: <input type="text"
name="email" id="email" /> salary: <input type="text"
name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button>
<br> <br>
<hr>
<br> <br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>a</td>
<td>a@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">删除</a></td>
</tr>
<tr>
<td>
b
</td>
<td>b@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">删除</a></td>
</tr>
<tr>
<td>c</td>
<td>c@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">删除</a></td>
</tr>
<tr>
<td>d</td>
<td>d@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=004">删除</a></td>
</tr>
<tr>
<td>f</td>
<td>f@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=005">删除</a></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>