<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*#d1{background-color: rgb(211,21,42);width: 200px;height: 50px;
line-height: 50px;text-align: center;position: relative;}
#d1 p{color: white;}
#d1 p button{top: 25%;right: 0;position: absolute;font-size: 20px; background-color: rgba(0,0,0,0); }
button{border: 0;color: white;}*/
button:focus{outline: none;}
#in1:focus{;outline: none;text-align: center;}
#in1{border: 0 ;border-bottom:1px solid rgb(150,150,150);
font-size: 20px;height: 35px;width: 200px;}
#d2 button{height: 35px;
background-color: orange;width: 80px;
color: white;border: 0;
}
.bb{cursor: pointer;}
</style>
</head>
<body id="body">
<!--<div id="d1">
<p id="p1">西瓜<button id="b1">×</button></p>
</div>-->
<div id="d2">
<input type="" name="" id="in1" value="" />
<button id="b2" >确定</button>
</div>
</body>
</html>
<script type="text/javascript">
// b1=document.getElementById('b1')
// b1.onclick=function(){
// this.parentElement.parentElement.remove()
// }
body = document.getElementById('body')
div2 = document.getElementById('d2')
in1=document.getElementById('in1')
b2 = document.getElementById('b2')
b2.onclick = function(){
red =parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
s=in1.value
div3=document.createElement('div')
//
div3.style=";line-height: 50px;text-align: center;position: relative;width:200px;height:50px;"
div3.style.backgroundColor = 'rgb('+red+','+green+','+blue+')'
p3 = document.createElement('p')
p3.innerText=s
p3.style ='color: white;margin-top:3px;margin_bottom:3px'
b3 =document.createElement('button')
b3.className='bb'
b3.innerText='×'
b3.style='border: 0;color: white;top: 25%;right: 0;position: absolute;font-size: 20px; background-color: rgba(0,0,0,0); '
p3.appendChild(b3)
div3.appendChild(p3)
body.insertBefore(div3,div2)
bottons = document.getElementsByClassName('bb')
console.log(bottons)
for(x in bottons){
bottons[x].onclick = function(){
y =confirm('是否删除?')
if (y){
this.parentElement.parentElement.remove()
}
}
}
}
</script>
QQ图片20190521103326.png
