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
Feb 25 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
浅谈JavaScript面向对象--继承
Mar 20 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
网络教育自我鉴定
2013/11/01 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
团日活动策划书
2014/02/01 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
股指期货心得体会
2014/09/13 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
关于五一放假的通知
2015/08/18 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python