<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>删除li</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
width: 818px;
height: 494px;
list-style: none;
margin: 30px auto;
}
#box li{
background: red;
width: 100px;
height: 50px;
margin-top: 2px;
margin-right: 2px;
font-size: 20px;
color: white;
text-align: center;
line-height: 50px;
float: left;
}
#p{
width: 400px;
margin: 30px auto;
}
</style>
</head>
<body>
<div id="p">
需要删除数字为哪一个的红方块
<input type="text" name="" id="content" value="" />
<input type="button" name="btn" id="btn" value="提交" />
</div>
<ul id="box">
</ul>
</body>
</html>
<script type="text/javascript">
var box = document.getElementById('box');
var content = document.getElementById('content');
function randFun(){
return parseInt(Math.random()*9+1);
}
for(var i = 0;i < 64;i++){
var li = document.createElement('li');
box.appendChild(li);
li.innerHTML = randFun();
}
btn.onclick = function(){
var lis = box.getElementsByTagName('li');
console.log(lis)
for(var j = 0;j < lis.length;j++){
if(lis[j].innerHTML == content.value){
lis[j].parentNode.removeChild(lis[j]);
j--;//重点,删除之后,需要减一确保顺序错误
}
}
}
</script>