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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
2.PHP入门
2006/10/09 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
php学习笔记之基础知识
2014/11/08 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python字符串替换示例
2014/04/24 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
初级Java程序员面试题
2016/03/03 面试题
坚定理想信念心得体会
2014/03/11 职场文书
2014年教务工作总结
2014/12/03 职场文书
运动员入场词
2015/07/18 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
学习心得体会
2019/06/20 职场文书
mysql知识点整理
2021/04/05 MySQL
深入理解go slice结构
2021/09/15 Golang