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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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阳历转农历优化版
2016/08/08 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
vue使用recorder.js实现录音功能
2019/11/22 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
工程师岗位职责
2013/11/08 职场文书
财经学院自荐信范文
2014/02/02 职场文书
运动会跳远加油稿
2014/02/20 职场文书
亚运会口号
2014/06/20 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
安全责任协议书范本
2016/03/23 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
OpenCV 图像梯度的实现方法
2021/07/25 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript