js 动态添加复制删除相同div层

最新推荐文章于 2021-06-03 10:27:56 发布

minh456

最新推荐文章于 2021-06-03 10:27:56 发布

阅读量376

点赞数

分类专栏： JS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/minh456/article/details/84244223

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>
<title>金男玉女-宝啊网-www.baoa.net </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<meta name="description" content="不需要闭月羞花的天使面貌，不需要杨柳细腰的魔鬼身材，只要你身材比例均匀，只要你喜欢在镜头前展示自己，只要你怀抱梦想热爱生活，我们会提供各式各样的时尚服饰供你试穿，用镜头拍摄下你最美最有自信的一面Try your best，快点加入成为我们专属的试衣天使吧！mh" />

//js CODE:

<script>
function insert(){
var thenew= document.createElement('li');
var numid= document.getElementById('ah_mh').innerHTML;
document.getElementById('addDefault'+numid).style.display='none';
if(document.getElementById('removeDefault'+numid)){
document.getElementById('removeDefault'+numid).style.display='none';
}
var numid=parseInt(numid)+1;

document.getElementById('ah_mh').innerHTML=numid;

thenew.innerHTML='上传照片'+numid+'：<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span><a href="javascript:void(0);" οnclick="insert();" id="addDefault'+numid+'">添加</a> <a href="javascript:void(0);" οnclick="remove();" id="removeDefault'+numid+'">删除</a>';
document.getElementById('s').appendChild(thenew);
}
function remove()
{
var numid= document.getElementById('ah_mh').innerHTML;
if(parseInt(numid)<=3){
var numid=3;
document.getElementById('addDefault'+numid).style.display='';
document.getElementById('ah_mh').innerHTML=numid;
document.getElementById('s').removeChild(document.getElementById('s').childNodes.item(numid));
}else{
var numid=parseInt(numid)-1;
document.getElementById('addDefault'+numid).style.display='';
document.getElementById('ah_mh').innerHTML=numid;
document.getElementById('s').removeChild(document.getElementById('s').lastChild);
document.getElementById('removeDefault'+numid).style.display='';
}
}
</script>

</head>

<body>

//HEML CODE:

<ul>

<li>上传照片1：<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span></li>
<li>上传照片2：<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span></li>
<li >上传照片3：<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span><a href="javascript:void(0);" οnclick="insert();" id="addDefault3">添加</a></li>
<div style="height:auto; overflow:hidden;" id="s"></div>//容器层
<span id="ah_mh" style="display:none;">3</span>//计数标签

</ul>
</body>
</html>

minh456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 动态添加复制删除相同div层

金男玉女-宝啊网-www.baoa.net //js CODE:function insert(){ var thenew= document.createElement('li'); var numid= document.getElementById('ah_mh').innerHTML; docum...
复制链接

扫一扫