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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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阻止页面后退的方法分享
2014/02/17 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python的re模块正则表达式操作
2016/05/25 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python3进制之间的转换代码实例
2019/08/24 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
少年闰土教学反思
2014/02/22 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
党性分析材料格式
2014/12/19 职场文书
学生犯错保证书
2015/05/09 职场文书
担保书范文
2019/07/09 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers