<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
fieldset{
width: 920px;
margin: 0 auto;
padding: 20px;
cursor: pointer;
border-radius: 5px;
}
legend:hover{
text-decoration: underline;
}
ul{
overflow: hidden;/*清除浮动*/
}
ul>li{
width: 103px;
height: 106px;
margin: 5px;
float: left;
text-align: center;
padding-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
}
ul>li:hover{
cursor: move;
border: 1px dotted #666;
}
ul>li>img{
vertical-align: top;
}
ul>li>p{
height: 17px;
line-height: 17px;
font-size: 12px;
}
ul>li>span{
width: 14px;
height: 14px;
text-align: center;
line-height: 14px;
position: absolute;
right: 0;
top: 0;
color: #999;
font-size: 12px;
background-color: #eee;
display: none
}
ul>li:hover>span{
display: block;
}
ul>li>span:hover{
color: #333;
cursor: pointer;
}
</style>
</head>
<body>
<fieldset id="">
<legend>新建文件夹</legend>
<ul>
<li>
<img src="img/file.png"/>
<p>新建文件夹(1)</p>
<span>×</span>
</li>
<li>
<img src="img/file.png"/>
<p>新建文件夹(2)</p>
<span>×</span>
</li>
<li>
<img src="img/file.png"/>
<p>新建文件夹(3)</p>
<span>×</span>
</li>
</ul>
</fieldset>
<script type="text/javascript">
//获取legend和ul元素
var createFile = document.querySelector("legend");
var ul = document.querySelector("ul");
var trash = [];//先声明一个仓库 用来存储用户删除的文件夹
var re = /\d+/g;//正则匹配数组
//新建文件夹点击事件
var index = 3;
createFile.onclick = function(){
if(trash.length){
//数组里面有东西
index = trash[0];
//拿完之后清空数组
trash.shift();
}else{
//如果已经把删除的元素全部新建完毕那么此时新建文件夹应该是li的长度
index = ul.children.length + 1;
}
var li = document.createElement("li");//创建li标签
var img = document.createElement("img");//创建img标签
img.setAttribute("src","img/file.png");//给img标签增加src属性
var p = document.createElement("p");//创建p标签
var ptxt = document.createTextNode("新建文件夹("+index+")");//创建p的文本节点
p.appendChild(ptxt);//把文本插入到p标签里面
var span = document.createElement("span");//创建span标签
var spantxt = document.createTextNode("×");//创建sapn的文本节点
span.appendChild(spantxt);//把文本插入到span标签里面
li.appendChild(img);//把img插入到li中
li.appendChild(p);//把p插入到li中
li.appendChild(span);//把sapn插入到li中
ul.appendChild(li);//把li插入到ul里面
}
//删除
//我们删除利用事件委托(已存在的最近的祖先元素)
ul.onclick = function(e){
//事件对象兼容
var ev = e || window.event;
//事件源
var target = ev.target || ev.srcElement;
if(target.nodeName === "SPAN"){
//我先把要删除的东西存储起来
//var trash = target.parentNode;//我们这种方式只能存一个东西
//console.log(target.previousElementSibling.innerText.match(re))
//字符串截取
//trash.push(target.previousElementSibling.innerText.slice(6,-1))
//使用正则表达式匹配
trash.push(target.previousElementSibling.innerText.match(re));//数组尾部插入
console.log(trash)
//删除当前被点击的span的父元素li
target.parentNode.parentNode.removeChild(target.parentNode)
}
}
</script>
</body>
</html>