jQuery实现动态添加和删除一个div


Posted in Javascript onAugust 12, 2015

本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#father
{
 width:150px;
 height:150px;
 background-color:red;
}
#father div
{
 width:50px;
 height:50px;
 background-color:green;
 font-size:12px;
}
</style>
<script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#father").prepend("<div>三水点靠木欢迎您</div>");
})
</script>
</head>
<body>
<div id="father"></div>
</body>
</html>

以上代码可以在父div中添加一个div,下面再介绍一下如何删除一个div,下面只给出核心代码:

$(document).ready(function(){
 $("#father").prepend("<div>三水点靠木欢迎您</div>");
 $("div").remove("#father div");
})

以上代码可以移除添加的div。

示例二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Add And Close Div</title> 
<script type="text/javascript教程" > 
$(document).ready(function(){ 
    bindListener();
})
function addimg(){ 
    $("#mdiv").append('<div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div>'); 
    
    // 为新元素节点添加事件侦听器
    bindListener();
}
// 用来绑定事件(使用unbind避免重复绑定)
function bindListener(){
    $("a[name=rmlink]").unbind().click(function(){
        $(this).parent().remove(); 
    })
}
</script>
 
</head> 
 <body> 
<form action="" method="post" enctype="multipart/form-data"> 
 <label>请选择上传的图片</label> 
  <a href="javascript:addimg()" id="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> 
 </body> 
 </html>

相关阅读:

1.prepend()函数可以参阅jQuery的prepend()方法一章节。

2.remove()函数可以参阅jQuery的remove()方法一章节。

Javascript 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
JavaScript多线程详解
Aug 12 #Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 #Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 #Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 #Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 #Javascript
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
南京某公司笔试题
2013/01/27 面试题
七一建党日演讲稿
2014/09/05 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js