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 添加和移除函数的通用方法
Oct 20 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
在Python中使用模块的教程
2015/04/27 Python
不要用强制方法杀掉python线程
2017/02/26 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python isinstance函数用法详解
2020/02/13 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
pycharm实现猜数游戏
2020/12/07 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
销售人员自我评价
2014/02/01 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
大气污染防治方案
2014/05/19 职场文书
单位授权委托书范文
2014/08/02 职场文书
一般党员对照检查材料
2014/09/24 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
如何利用python创作字符画
2022/06/25 Python