Jquery动态添加及删除页面节点元素示例代码


Posted in Javascript onJune 16, 2014

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行。

废话不多说,直接上代码!

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Jquery动态添加及删除页面节点</title> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><!--引用jqurey库文件--> 
<style> 
.container{ width:1000px; margin:0 auto;} 
.top{ height:25px; line-height:25px;} 
.top select{ width:80px; height:22px; line-height:22px;} 
.top input{ width:56px; height:22px;} 
.add{ line-height:30px;} 
li{ list-style:none;} 
span{cursor:pointer;} 
</style> 
<script> 
$(function(){//页面加载完毕后执行 
$("input").click(function(){//添加操作 
var getval=$("select").val();//获取当前选中的select值 
$("p").before('<li>'+getval+'<span>X</span></li>');//在p标签前加入所要生成的代码 
}); 
}); 
$("span").live("click",function(){//通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) 
$(this).parent().remove();//移除当前点击元素的父元素 
}); 
</script> 
</head> <body> 
<div class="container"> 
<div class="top"> 
<select> 
<option>我是一号</option> 
<option>我是二号</option> 
<option>我是三号</option> 
<option>我是四号</option> 
<option>我是五号</option> 
</select> 
<input value="添 加" type="button"/> 
</div> 
<div class="add"><p></p></div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 #Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 #Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 #Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 #Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 #Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 #Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 #Javascript
You might like
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
菜鸟学PHP之Smarty入门
2007/01/04 PHP
基于php下载文件的详解
2013/06/02 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
python中使用print输出中文的方法
2018/07/16 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python语言快速上手学习方法
2018/12/14 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
css3中transition属性详解
2014/09/02 HTML / CSS
phpquery中文手册
2021/03/18 PHP
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
10条PHP编程习惯
2014/05/26 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
成教自我鉴定
2013/10/27 职场文书
合伙经营协议书
2014/04/18 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
邀请函范文
2015/02/02 职场文书
2015中学教学工作总结
2015/07/22 职场文书
校友会致辞
2015/07/30 职场文书
学习经验交流会策划书
2015/11/02 职场文书
银行服务理念口号
2015/12/25 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS