JS实现动态添加和删除DIV

前言


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


JS实现动态添加和删除DIV_第1张图片


实例


工具:Dreamweaver firefox  chrome


      Html







经历



大学            入学年份   

 身 份                  院系                

删除

      添加大学


      js





       效果


        添加前

JS实现动态添加和删除DIV_第2张图片


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


          添加后


JS实现动态添加和删除DIV_第3张图片


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


总结

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

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

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

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

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

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

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


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

你可能感兴趣的:(【项目实战】)