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 sortable效果 代码有错但值得看看
Nov 05 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
validform表单验证的实现方法
Mar 08 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
jquery检测上传文件大小示例
Apr 26 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
discuz目录文件资料汇总
2014/12/30 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
微信小程序实现底部导航
2018/11/05 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python爬取内容存入Excel实例
2019/02/20 Python
python脚本开机自启的实现方法
2019/06/28 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
销售总监工作职责
2013/11/21 职场文书
技术人员面试提纲
2013/11/28 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
大一新生学期自我评价
2014/04/09 职场文书
校园文明倡议书
2014/05/16 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
自主招生自荐信格式
2015/03/04 职场文书
自荐信怎么写
2015/03/04 职场文书
公司员工手册范本
2015/05/14 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
Python中的xlrd模块使用整理
2021/06/15 Python