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高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JavaScript实现下拉列表
Jan 20 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使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python协程的用法和例子详解
2017/09/09 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
银行开业庆典方案
2014/02/06 职场文书
迟到检讨书300字
2014/02/14 职场文书
环保倡议书范文
2014/05/12 职场文书
语文课外活动总结
2014/08/27 职场文书
工作检讨书怎么写
2015/01/23 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript