增加删除div
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div_list{
display: block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.btn_list{
position: absolute;
left: 120px;
}
</style>
<script type="text/javascript">
window.onload = function(){
function div_elem(i){
return '<div id="d'+i+'" class="div_list"><input type="button" value="删除'+i+'" id="input'+i+'" class="btn_list"></div>';
}
function add_div(){
var odiv_add = document.getElementById('div_add');
var obtn1 = document.getElementById('btn1');
var count1 = 0;
obtn1.onclick = function(){
var div_data = '';
count1++;
if (count1<=6) {
for(var i = 0; i<count1; i++){
div_data += div_elem(i);
}
}else{
alert('不能再增加了');
return;
}
odiv_add.innerHTML = div_data;
function btn_delete(){
var obtn_list = document.getElementsByClassName('btn_list');
for(var j = 0; j<obtn_list.length;j++){
(function(j){
obtn_list[j].onclick = function(){
count1--;
odiv_add.removeChild(odiv_add.childNodes[j]);
btn_delete();
}
})(j);
}
}
btn_delete()
}
}
add_div();
}
</script>
</head>
<body>
<div id="div_add"></div>
<input type="button" id="btn1" value="增加" />
</body>
</html>
</body>
</html>
增加删除div的更多相关文章
- Nodejs之MEAN栈开发（九）---- 用户评论的增加/删除/修改
由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...
- 转： KindEditor 图片空间文件增加删除文件、文件夹功能（ASP语言环境）
KindEditor 图片上传功能中集成的图片空间文件管理插件可以对已上传图片进行管理,十分便捷,只是没有图片删除功能,仔细研读xieliang分享的经验后,自己动手改造了一下,顺便分享给有同样需求的 ...
- bootstrap-table 分页增删改查之一（增加 删除）
先上效果图 引入js文件 <!--js jquery --> <script type="text/javascript" src="${pageCon ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 点击增加删除class
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 在Javascript操作JSON对象，增加 删除 修改
在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...
- js动态删除div元素
在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...
- UITableView 编辑模式(增加-删除-移动---自定义左滑 title)
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- CentOS如何手动增加 删除swap区
SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...
随机推荐
- [BZOJ2843] 极地旅行社（LCT）
传送门 模板. ——代码 #include <cstdio> #include <iostream> #define N 300001 #define get(x) (son[ ...
- FFT模板（From MG）
#include<cstdio> #include<cmath> #include<algorithm> using namespace std; struct c ...
- 交友app
编辑注记:这是由译者 han_qi 翻译纽约客的一篇文章,从女性的角度描写了交友产品的用户体验及需求,值得广大产品经理深入研究,文章略长,但值得深读.原文<Overwhelmed and Cre ...
- 12、Java并发性和多线程-Java同步块
以下内容转自http://ifeve.com/synchronized-blocks/: Java 同步块(synchronized block)用来标记方法或者代码块是同步的.Java同步块用来避免 ...
- 【CV论文阅读】Dynamic image networks for action recognition
论文的重点在于后面approximation部分. 在<Rank Pooling>的论文中提到,可以通过训练RankSVM获得参数向量d,来作为视频帧序列的representation.而 ...
- Display certain line(s) from a text file in Linux.
Purpose: Display certain line or lines from a text file, such as : Display the 1000th line from file ...
- FloatingActionMenu 向上弹出菜单
本人在github上找到了一个FloatingActionsMenu,精简了其效果(原效果有上下左右四个方向)仅仅保留向上的效果,并做了一定的优化. github上的源代码:地址 ,精简后的源代码地址 ...
- cordova windows环境配置
* 安装Cordova 1.cordova是利用nodeJS进行管理,所以要先下载nodeJS. 2. 打开命令窗口,输入:“npm install -g cordova”即可安装 3. 安装后,输入 ...
- 【Android】资源系列(一) -- 国际化(多语言)
1.Android 中要实现国际化比較简单. 字符串国际化:仅仅要在 res 目录下新建相应语言的 values 目录就好了. 如.英语环境下的.目录命名为:values-en ...
- 1064. Complete Binary Search Tree (30)【二叉树】——PAT (Advanced Level) Practise
题目信息 1064. Complete Binary Search Tree (30) 时间限制100 ms 内存限制65536 kB 代码长度限制16000 B A Binary Search Tr ...