jquery动态添加删除div 具体实现


Posted in Javascript onJuly 20, 2013
<script type=”text/javascript” src=”jquery.js”></script>
<body>
<form action=”" method=”post” enctype=”multipart/form-data”>
<label>请选择上传的图片</label>
<a href=”javascript:addimg()” >增加图片</a>
<div class=”mdiv” id=”mdiv”>
<div class=”iptdiv” >
<input type=”file” name=”img[]” class=”ipt” /><a href=”#” name=”rmlink”>X</a>
</div>
</div>
<input type=”submit” name=”submit” value=”上传图片” />
</form>
<script type=”text/javascript” >
$(document).ready(function(){
bindListener();
});
// 用来绑定事件(使用unbind避免重复绑定)
function bindListener(){
$(“a[name=rmlink]“).unbind().click(function(){
$(this).parent().remove();
})
}
function addimg(){
$(“#mdiv”).append(‘<div class=”iptdiv”><input type=”file” name=”img[]” class=”ipt” /><a href=”#” name=”rmlink”> X </a></div>');
// 为新元素节点添加事件侦听器
bindListener();
}
</script>
Javascript 相关文章推荐
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 #Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 #Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 #Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 #Javascript
javascript判断非数字的简单例子
Jul 18 #Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 #Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 #Javascript
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
设定php简写功能的方法
2019/11/28 PHP
js中indexof的用法详细解析
2013/12/24 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
批处理与python代码混合编程的方法
2016/05/19 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
numpy.random模块用法总结
2019/05/27 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
使用python模拟命令行终端的示例
2019/08/13 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
python如何爬取动态网站
2020/09/09 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
领导检查欢迎词
2014/01/14 职场文书
创新比赛获奖感言
2014/02/13 职场文书
医院保洁服务方案
2014/06/11 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书