JS实现动态添加和删除DIV

最新推荐文章于 2023-09-06 20:10:31 发布

柏修的个人笔录

最新推荐文章于 2023-09-06 20:10:31 发布

阅读量1.8w

点赞数 11

分类专栏：【项目实战】

本文链接：https://blog.csdn.net/cfl20121314/article/details/17092615

版权

【项目实战】专栏收录该内容

16 篇文章 0 订阅

订阅专栏

前言

在做项目的过程中，做到关于添加个人的教育这一块的时候，需要使用动态添加和删除div的操作。这个大家应该不陌生，在很多网站注册的时候都会要求对于自己的教育的经历进行完善。如下图

实例

工具：Dreamweaver firefox chrome

Html

<!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>经历</title>
<link href="个人资料.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
<div id="parentpoint">
<div  id="college"  name="college">
  <p><span >大学</span>   
  <input name="univ_name_0" height="20" tabindex="1" value="廊坊师范"  id="univ_name_0"  type="text">
           入学年份   
  <select name="univ_year_0" tabindex="2" id="univ_year_0" >
    <option value="0">入学年份</option>
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>
</select>
  </p>
  <p>   身  份       
    <select name="univ_type_0" tabindex="3" id="univ_type_0" >
    <option value="">请选择类型</option>
    <option value="大学生">大学生</option>
    <option value="硕士">硕士</option>
    <option value="博士">博士</option>
    <option value="校工">校工</option>
    <option value="教师">教师</option>
  </select>
                <span>     院系       </span>
    <span id="univDormComponent_Span1"> </span>
    <select id="univ_name_0_dept" name="department1"  tabindex="4"  title="生命科学学院">
      <option value="">院系</option>
      <option value="体育学院">体育学院</option>
      <option value="化学与材料科学学院">化学与材料科学学院</option>
      <option value="外国语学院">外国语学院</option>
      <option value="建筑工程学院">建筑工程学院</option>
      <option value="心理系">心理系</option>
      <option value="教育学院">教育学院</option>
      <option value="数学与信息科学学院">数学与信息科学学院</option>
      <option value="文学院">文学院</option>
      <option value="物理与电子信息学院">物理与电子信息学院</option>
      <option selected="selected" value="生命科学学院">生命科学学院</option>
      <option value="社会发展学院">社会发展学院</option>
      <option value="管理学院">管理学院</option>
      <option value="经济学院">经济学院</option>
      <option value="美术学院">美术学院</option>
      <option value="音乐学院">音乐学院</option>
      <option value="其它院系">其它院系</option>
    </select>
            <div id="remove" name="div" href="#" οnclick="DeleteCollegeDiv(this)">删除</div></p>
  <p>      <a id="remove_univ_0"  href="#nogo" οnclick="AddCollegeDiv('college')">添加大学</a></p>
</div>
</div>

js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >

//动态生成和删除大学教育经历的div
var collegediv =1;
var collegename=1;
//生成大学教育div
function AddCollegeDiv(strid){
	 	var o=document.getElementById(strid);	 
        var div=document.createElement("div");
        div.id = "college"+ collegediv; 
		var deletediv=document.createElement("div");
		//拿到删除按钮的id并加1
		var deletename=o.childNodes.item(4).id+1;
        <!--div.innerHTML=o.innerHTML.replace(/\{0\}/ig,a);-->
		//将现有的divhtml赋值给新创建的div
		div.innerHTML=o.innerHTML;
		document.getElementById("parentpoint").appendChild(div);
		//给新的div的删除按钮赋值（动态加1）
		div.childNodes.item(4).id=deletename;
        collegediv++;
		collegename++;
}
//动态删除大学教育经历div
function DeleteCollegeDiv(obj)
{	
	<!--var strid=obj.name;-->
	//获取本删除按钮的id值，并创建对象
	var strid=obj.id;
	var o=document.getElementById(strid);
	var z=o.parentElement;
	<!--var o=document.getElementsByTagName(strid)[4].parentElement;-->
	//找到这个删除按钮对应的父div的值
	<!--var stridone=document.getElementsByName(strid)[0].parentNode.id;-->
	var stridone=z.id;
	//判断本id对应的值并删除
	var my = document.getElementById(stridone);
	if (my != null){
	my.parentNode.removeChild(my);}
	<!--window.location.reload(); -->
}

var highschooldiv =1;
var deletehighschool=1;
//动态生成和删除高中教育经历div
function AddHSDiv(hcId){
	 	var o=document.getElementById(hcId);	 
        var div=document.createElement("div");
        div.id = "HighShool"+ highschooldiv; 
		var deletediv=document.createElement("div");
		//拿到删除按钮的id并加1
		var deletename=o.childNodes.item(4).id+1;
        <!--div.innerHTML=o.innerHTML.replace(/\{0\}/ig,a);-->
		//将现有的divhtml赋值给新创建的div
		div.innerHTML=o.innerHTML;
		document.getElementById("parentpointHS").appendChild(div);
		//给新的div的删除按钮赋值（动态加1）
		div.childNodes.item(4).id=deletename;
        highschooldiv++;
		deletehighschool++;
}
</script>

效果

添加前

这里大家可以看到，添加前这里只存在一个id为college的div块

添加后

与上图相比这里就动态添加了一个id为"college1div"块了.删除虽有不同，大致思路一致。

总结

这里主要涉及到的一些思路的问题

1.只用两个函数来实现动态删除，就需要每次点击添加时，自动调用本div的id号

这里用this解决，直接οnclick="DeleteCollegeDiv(this)"。这样就很好的维护了点击本

身按钮来传值。虽然很简单的知识，很实用。

2.如何来调用本身div的子div与div的问题

这里使用childNode和pareentElement和索引来解决，但是还是会出现问题，（目前测试没有问题）。这是因为/n这个转义字符的原因，由于浏览器解析的方式不同会导致索引发生变化。当

然也是有办法，这里先不说了。

总的来讲，这个东西花费了一些时间。主要是思路上的问题以及怎么在dom节点之间的调用的和传值。还是挺有收获。

柏修的个人笔录

关注

11
点赞
踩
20

收藏

觉得还不错? 一键收藏
55
评论
JS实现动态添加和删除DIV

前言在做项目的过程中，做到关于添加个人的教育这一块的时候，需要使用动态添加和删除div的操作。这个大家应该不陌生，在很多网站注册的时候都会要求对于自己的教育的经历进行完善。如下图实例工具：Dreamweaver firefox chrome Html经历大学
复制链接

扫一扫