Java__Script4——删除节点

一、删除节点：
（1） removeChild():从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
element——父节点
node——子节点
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除。
如果想删除某个节点，但不知道它的父节点是哪一个，parentNode 属性可以帮忙。

/*
 * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
 * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
 * 第一个 td 子节点的文本值, 且要去除前后空格.
 * 2. 若点击 "确认" , 则删除 a 节点的所在的 行
 *
 * 注意:
 * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
 * 2. tr 的直接父节点为 tbody, 而不是 table
 * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数. 
 *
 * 为 #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(aNoe){
		 
		 var trNode = aNoe.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;
	 }
	 
	 var aNodes = document.getElementById("employeetable")
	                      .getElementsByTagName("a");
	 for(var i = 0; i < aNodes.length; i++){
		 aNodes[i].onclick = function(){
			 removeTr(this);			 
			 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;
		 
		 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));
		 
		 var tr = document.createElement("tr");
		 
		 tr.appendChild(nameTd);
		 tr.appendChild(emailTd);
		 tr.appendChild(salaryTd);
		 
		 alert("aa");
		 
		 //<td><a href="deleteEmp?id=xxx">Delete</a></td>
		 var aNode = document.createElement("a");
		 aNode.href = "deleteEmp?id=xxx";
		 aNode.appendChild(document.createTextNode("Delete"));
		 var aTd = document.createElement("td");
		 aTd.appendChild(aNode);
		 
		 tr.appendChild(aTd);
		 
		 aNode.onclick = function(){
			 removeTr(this);			 
			 return false;
		 }
		 
		 document.getElementById("employeetable")
		         .getElementsByTagName("tbody")[0]
		         .appendChild(tr);
		 
		 //value: 用于获取 html 表单元素的值
		 //alert(this.value); //
		 //nodeValue: 用于获取文本节点的文本值. 
		 //alert(this.nodeValue); //null
		 
	 }
	 
	 function trim(str){
		 var reg = /^\s*|\s*$/g;
		 return str.replace(reg, "");
	 }
	 
 }