jQuery实现动态添加和删除一个div
本文主要给大家简单介绍一下如何动态的在一个元素添加和删除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>100素材网</div>");
})
</script>
</head>
<body>
<div id="father"></div>
</body>
</html>
以上代码可以在父div中添加一个div，下面再介绍一下如何删除一个div，下面只给出核心代码:
$(document).ready(function(){
$("#father").prepend("<div>100素材网</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>
jQuery实现动态添加和删除一个div的更多相关文章
- 如何动态添加和删除一个div
代码实例如下: <!DOCTYPE html><html><head><meta charset="utf-8"><meta ...
- jQuery如何动态添加具有删除按钮的行
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
- jquery 如何动态添加、删除class样式方法介绍
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...
- jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...
- Jquery Validate动态添加和删除校验规则
以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
- angular.element 动态添加和删除元素
addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...
- jQuery获取动态添加的元素，live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
随机推荐
- 区分DPI、分辨率(PPI)、图像的物理大小、像素宽度
分辨率都知道,越高越清晰. 一.描述分辨率的单位有: dpi(点每英寸).lpi(线每英寸)和ppi(像素每英寸).但只有lpi是描述光学分辨率的尺度的.虽然dpi和ppi也属于分辨率范畴内的单 ...
- 设置emacs插件flycheck使用jslint eslint
emacs的flycheck插件支持使用 jslint 和eslint (setq flycheck-javascript-eslint-executable "~/.nvm/versi ...
- 解决docker不能下载镜像
试了很多办法.用ss,vpn,都不行. 修改 /etc/default/docker的方式貌似在 1.12不好使了.最后找到和这个办法 http://blog.csdn.net/gsying1474/ ...
- [AIR] 利用SnapShot.exe实现QQ截屏功能
主类(可作文档类): package { import flash.display.Bitmap; import flash.display.Sprite; import flash.events.E ...
- DataTable.select() 返回 DataTable
DataTable.select() 默认返回值为 DataRow[]数组 代码来自网络: /**/ /// <summary> /// 执行DataTable中的查询返回新的DataTa ...
- NYOJ 52-无聊的小明
点击打开链接 无聊的小明 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 这天小明十分无聊,没有事做,但不甘于无聊的小明聪明的想到一个解决无聊的办法,因为他突 ...
- iOS 数据存储 - 归档和解归档
这里的归档主要是用于自定义类的归档和解档.我们这里使用NSKeyedArchiver和NSKeyedUnarchiver来归档和解档. 注意:自己定义的类需要实现<NSCoding>,如: ...
- 再战map
以前自己整理过map容器,但是好像没有这篇这么系统... Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据 处 ...
- sql 2008 r2
http://jingyan.baidu.com/article/6c67b1d6ca06f02787bb1ed1.html
- Linux下查看文件和文件夹大小（转）
觉得挺有用的,就转到了自己的博客里,方便以后查询: 转自:http://www.cnblogs.com/benio/archive/2010/10/13/1849946.html 当磁盘大小超过标准时 ...