JavaScript DOM编程学习笔记-删除节点

原创

umgsai 2014-10-16 11:15:31 博主文章分类：html ©著作权

文章标签 javascript function 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者umgsai的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
	//测试removeChild()方法  删除节点
	window.onload = function() {
		//alert(1);
		var bjNode = document.getElementById("bj");
		//var c = bjNode.parentNode.removeChild(bjNode);//指向已经删除的节点
		//alert(c.firstChild.nodeValue);
		//为li节点添加一个confirm
		var liNodes = document.getElementsByTagName("li");
		//alert(liNodes.length);
		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>深圳2</li>
	</ul>
	<p>你喜欢哪本书？</p>
	<ul id="book">
		<li id="xyj" name="xyj">西游记</li>
		<li>三国演义</li>
		<li>水浒传</li>
		<li>水浒传2</li>
	</ul>
	<br />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
	window.onload = function() {
		
		var aNodes = document.getElementById("employeetable").getElementsByTagName("a");
		//为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;
			//alert(nameVal);
			/*
			if(!nameVal || !emailVal || !salaryVal){
				alert("请将信息填写完整");
				return false;
			}
			*/
			if(trim(nameVal) == "" || trim(emailVal) == "" || trim(salaryVal) == ""){
				alert("请将信息填写完整");
				return false;
			}
			//创建td节点
			var nameTd = document.createElement("td");
			//创建文本节点并且将其添加到td节点下
			nameTd.appendChild(document.createTextNode(nameVal));
			
			//创建td节点
			var emailTd = document.createElement("td");
			//创建文本节点并且将其添加到td节点下
			emailTd.appendChild(document.createTextNode(emailVal));
			
			//创建td节点
			var salaryTd = document.createElement("td");
			//创建文本节点并且将其添加到td节点下
			salaryTd.appendChild(document.createTextNode(salaryVal));
			
			//创建tr节点
			var tr = document.createElement("tr");
			//将td节点添加到tr节点下面
			tr.appendChild(nameTd);
			tr.appendChild(emailTd);
			tr.appendChild(salaryTd);
			
			//创建a节点
			var aNode = document.createElement("a");
			aNode.href = "deleteEmp?id=XXX";
			aNode.appendChild(document.createTextNode("Delete"));
			//为新建的a节点添加点击事件
			aNode.onclick = function(){
				removeTr(this);
				return false;
			}
			//创建td节点
			var aTd = document.createElement("td");
			//将a节点添加到td节点
			aTd.appendChild(aNode);
			//将td节点添加到tr节点
			tr.appendChild(aTd)
			
			//将tr节点添加到table中
			document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(tr);
		}
		
	}
	
	//正则表达式去除字符串前后空格
	function trim(str){
		var reg = /^\s*|\s*$/g;
		return str.replace(reg, "");
	}
	
	function removeTr(aNode){
		//得到tr
		var trNode = aNode.parentNode.parentNode;
		var textContent = trNode.getElementsByTagName("td")[0].firstChild.nodeValue;
		//alert(textContent);
		textContent = trim(textContent);
		var flag = confirm("确定删除"+ textContent +"的信息吗？");
		if(flag){
			//从tbody中删除tr
			trNode.parentNode.removeChild(trNode);
		}
		return false;
	}
</script>
</head>
<body>
	<center>
		<br> <br> 添加新员工 <br> <br> name: <input type="text"
			name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
			name="email" id="email" />&nbsp;&nbsp; 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>&nbsp;</th>
				</tr>
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="deleteEmp?id=001">Delete</a></td>
				</tr>
				<tr>
					<td>Jerry</td>
					<td>jerry@sohu.com</td>
					<td>8000</td>
					<td><a href="deleteEmp?id=002">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>bob@tom.com</td>
					<td>10000</td>
					<td><a href="deleteEmp?id=003">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>
</html>

使用JQuery实现

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
    window.onload = function() {
        /* 
        var aNodes = document.getElementById("employeetable").getElementsByTagName("a");
        //为a节点添加点击事件
        for(var i = 0; i < aNodes.length; i++){
            aNodes[i].onclick = function(){
                removeTr(this);
                return false;
            }
        }
        */
        
        $("#employeetable a").click(function(){
        	removeTr(this);
        	return false;
        });
         
        $("#addEmpButton").click(function(){
        	if($.trim($("#name").val()) == "" || $.trim($("#email").val()) == "" || $.trim($("#salary").val()) == ""){
                alert("请将信息填写完整");
                return false;
            }
        	
        	$("<tr></tr>").append("<td>" + $.trim($("#name").val()) + "</td>")
        					.append("<td>" + $.trim($("#email").val()) + "</td>")
        					.append("<td>" + $.trim($("#salary").val()) + "</td>")
        					.append("<td><a href='deleteEmp?id=XXX'>Delete</a></td>")
        					.appendTo("#employeetable tbody")
        					.find("a")//为tr中的a节点添加点击事件
        					.click(function(){
        						removeTr(this);
        			        	return false;
        					});
        	//添加完成后清空文本框
        	$("#name").val("");
        	$("#email").val("");
        	$("#salary").val("");
        });
         
    }
     
    function removeTr(aNode){
        //得到tr
        //var trNode = aNode.parentNode.parentNode;
        var $trNode = $(aNode).parent().parent();
        var textContent = $trNode.find("td:first").text();
        //alert(textContent);
        textContent = $.trim(textContent);
        var flag = confirm("确定删除"+ textContent +"的信息吗？");
        if(flag){
            //从tbody中删除tr
            $trNode.remove();
        }
        return false;
    }
</script>
</head>
<body>
    <center>
        <br> <br> 添加新员工 <br> <br> name: <input type="text"
            name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
            name="email" id="email" />&nbsp;&nbsp; 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>&nbsp;</th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="deleteEmp?id=001">Delete</a></td>
                </tr>
                <tr>
                    <td>Jerry</td>
                    <td>jerry@sohu.com</td>
                    <td>8000</td>
                    <td><a href="deleteEmp?id=002">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>bob@tom.com</td>
                    <td>10000</td>
                    <td><a href="deleteEmp?id=003">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </center>
</html>