`

尚硅谷：jQuery的删除节点

尚硅谷：jQuery的删除节点 
阅读更多

1、jQuery的删除节点

 

2、代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery的删除节点</title>		
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1. 为#city的每一个li添加click响应函数: 点击时, li被删除
				$("#city li").click(function(){
					$(this).remove();
				});

				//2. 删除#city节点，并会将其全部后代节点都清空
				$("#city").remove();

				//3. 清空#game节点
				//jQuery对象的empty()方法: 清空jQuery对象对应的 
				//DOM对象的所有的子节点. 
				$("#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="atguigu"/>
	</body>
</html>

 

3、原始界面

 

4、案例1

 

5、案例2

 

6、案例3

 

 

 

  • 大小: 188.4 KB
  • 大小: 26.9 KB
  • 大小: 26.1 KB
  • 大小: 24.4 KB
  • 大小: 24.3 KB
分享到：
| 尚硅谷：jQuery的添加分类内容的案例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics