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 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python打包多类型文件的操作方法
2020/09/21 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
《地震中的父与子》教学反思
2014/04/10 职场文书
解除合同协议书
2014/04/17 职场文书
效能风暴心得体会
2014/09/04 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
付款委托书范本
2014/10/05 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
合作协议书范本
2014/10/25 职场文书
运动会观后感
2015/06/09 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
Hive导入csv文件示例
2022/06/25 数据库