jQuery_删除及清空节点

最新推荐文章于 2022-05-16 19:38:55 发布

_noname

最新推荐文章于 2022-05-16 19:38:55 发布

阅读量1.2w

点赞数

分类专栏： web 文章标签： jquery dom

本文链接：https://blog.csdn.net/williamfan21c/article/details/54268790

版权

web 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

•remove():从 DOM中删除所有匹配的元素,传入的参数用于根据 jQuery 表达式来筛选元素.

当某个节点用remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

•empty():清空节点 –清空元素中的所有后代节点(不包含属性节点).

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//测试使用 jQuery 删除节点
			$(function(){
				//1. 为 #city 的每一个 li 添加 click 响应函数: 点击时, li 被删除
				//$("#city li").click(function(){
				//	$(this).remove();
				//});
			
				//jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的
				//DOM 节点直接删除. 
				$("#bj").remove();
				
				//2. 清空 #game 节点
				//jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的 
				//DOM 对象的所有的子节点. 
				alert("要清空了!");
				$("#game").empty();
			})
		
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</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="hello"/>
		
	</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {

		//1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话
		//那么这个对象一定是一个 jQuery 对象
		//2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象
		function removeTr(aNoe) {
			//获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象
			var $trNode = $(aNoe).parent().parent();
			var textContent = $trNode.find("td:first").text();
			textContent = $.trim(textContent);

			var flag = confirm("确定要删除" + textContent + "的信息吗?");
			if (flag) {
				$trNode.remove();
			}

			return false;
		}

		$("#employeetable a").click(function() {
			return removeTr(this);
		});

		$("#addEmpButton")
				.click(
						function() {
							$("<tr></tr>")
									.append("<td>" + $("#name").val() + "</td>")
									.append(
											"<td>" + $("#email").val()
													+ "</td>")
									.append(
											"<td>" + $("#salary").val()
													+ "</td>")
									.append(
											"<td><a href='deleteEmp?id=xxx'>Delete</a></td>")
									.appendTo("#employeetable tbody").find("a")
									.click(function() {
										return removeTr(this)
									});
						});

	})
</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>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>

</body>
</html>

_noname

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery_删除及清空节点

•remove():从 DOM中删除所有匹配的元素,传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.•empty():清空节点 –清空元素中的所有后代节点(不包含属性节点). Untitled Document
复制链接

扫一扫

专栏目录