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获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
随机推荐
- log4j 缓存
log4j.appender.A2.bufferedIO=truelog4j.appender.A2.bufferSize=512000
- POJ 3422 Kaka's Matrix Travels 【最小费用最大流】
题意: 卡卡有一个矩阵,从左上角走到右下角,卡卡每次只能向右或者向下.矩阵里边都是不超过1000的正整数,卡卡走过的元素会变成0,问卡卡可以走k次,问卡卡最多能积累多少和. 思路: 最小费用最大流的题 ...
- [POJ 1155] TELE (树形dp)
题目链接:http://poj.org/problem?id=1155 题目大意:电视台要广播电视节目,要经过中转机构,到观众.从电视台到中转商到观众是一个树形结构,经过一条边需要支付成本.现在给你每 ...
- Windows程序设计-窗口和消息
本章内容比较少,没有代码类的内容,这里付思维导图一章,看起来比较清晰.
- Android--输入自动提示AutoCompleteTextView
布局文件: <TextView android:id="@+id/title" android:layout_width="wrap_content" a ...
- [ CodeVS冲杯之路 ] P1053
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1053/ 直接扫一遍串,把字母对应的 ascii 码直接做数组下标,交给数组统计 最后查询一遍数组的 'a'-'z' , ...
- LoadRunner功能的Jmeter实现
- 软件测试—— junit 单元测试
Tasks: Install Junit(4.12), Hamcrest(1.3) with Eclipse Install Eclemma with Eclipse Write a java pro ...
- C语言程序设计50例(二）(经典收藏)
[程序11]题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月 后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?1.程序分析: 兔子的规律为数列1,1 ...
- TFS客户端登录用户修改
1.操作环境: Windows 10 Pro Visual Studio 2013 TFS客户端 2.操作背景 安装完成TFS系统后,使用administrator在客户端进行登陆测试(已勾选保存用户 ...