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 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
JavaScript对象学习小结
Sep 02 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Vue.js划分组件的方法
Oct 29 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Ajax常用封装库——Axios的使用
May 08 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递归删除目录几个代码实例
2014/04/21 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php实现的xml操作类
2016/01/15 PHP
DWR Ext 加载数据
2009/03/22 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
车间统计员岗位职责
2014/01/05 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
主题实践活动总结
2014/05/08 职场文书
个人违纪检讨书
2014/09/15 职场文书
个人年终总结开头
2015/03/06 职场文书
护士求职简历自我评价
2015/03/10 职场文书
大国崛起观后感
2015/06/02 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书