<!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的更多相关文章

  1. Nodejs之MEAN栈开发（九）---- 用户评论的增加/删除/修改

    由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...

  2. 转： KindEditor 图片空间文件增加删除文件、文件夹功能（ASP语言环境）

    KindEditor 图片上传功能中集成的图片空间文件管理插件可以对已上传图片进行管理,十分便捷,只是没有图片删除功能,仔细研读xieliang分享的经验后,自己动手改造了一下,顺便分享给有同样需求的 ...

  3. bootstrap-table 分页增删改查之一（增加 删除）

    先上效果图 引入js文件 <!--js jquery --> <script type="text/javascript" src="${pageCon ...

  4. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 点击增加删除class

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 在Javascript操作JSON对象，增加 删除 修改

    在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...

  7. js动态删除div元素

    在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...

  8. UITableView 编辑模式(增加-删除-移动---自定义左滑 title)

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  9. CentOS如何手动增加 删除swap区

    SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...

随机推荐

  1. 添物零基础到大型全栈架构师 不花钱学计算机及编程（预备篇）— C语言编程基础

    ​C语言介绍 C语言基本是每个编程人员必学的一面语言,很好掌握,是理解编程的关键.很多编程语言基于其编写或者基于此语言的衍生品编写. C语言是人机交互的一个基础语言之一,虽然是之一,单一般其实就是唯一 ...

  2. [luoguP1854] 花店橱窗布置（DP）

    传送门 f[i][j] 表示前 i 盆花,放到前 j 个花盆中的最优解 pre[i][j] 记录前驱 代码 #include <cstdio> #include <cstring&g ...

  3. [luoguP2863] [USACO06JAN]牛的舞会The Cow Prom（Tarjan）

    传送门 有向图,找点数大于1的强连通分量个数 ——代码 #include <stack> #include <cstdio> #include <cstring> ...

  4. Stockbroker Grapevine POJ 1125 Floyd

    Stockbroker Grapevine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37069   Accepted: ...

  5. T1081 线段树练习 2 codevs

    http://codevs.cn/problem/1081/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题目描述 Description 给你N个数, ...

  6. 学习——Git及VersionControl

    一.Git基本介绍 1.Git是什么? Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 Linus To ...

  7. [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs

    Wrapping the creation of an Observable inside of a Function allows you delay the creation of the Obs ...

  8. 导出excel——弹出框

    表单提交 凡是表单提交(表单提交分3种,见以下的1.2.3)的话.而且设置了表单标签的enctype="multipart/form-data"属性.那么这个时候就会打开弹出框. ...

  9. iOS推断当前控制器是否在显示

    当点击一个cell或者button的事件,处理比較耗时,在异步线程中执行中.当子线程得到执行结果时可能不在当前控制器上了.此时我们须要取消子线程后边的事情. 此刻,当得到结果时须要推断是否在当前控制器 ...

  10. LeetCode 893. Groups of Special-Equivalent Strings (特殊等价字符串组)

    题目标签:String 题目可以让在 偶数位置的 chars 互换, 也可以让 在 奇数位置的 chars 互换. 所以为了 return 正确的 group 数量,需要把 那些重复的 给排除掉. 可 ...