image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 p{
position: relative;
width: 200px;
height: 50px;
color: white;
line-height: 50px;
}
#div1 p button{
position: absolute;
right: 5px;
margin-top: 15px;
color: white;
background-color:rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
}
#div2 input{
border: 0;
border-bottom: 1px solid black;
width: 200px;
height: 40px;
font-size: 20px;
}
#div2 button{
background-color: red;
color: white;
font-size: 15px;
border: 0;
width: 80px;
height: 30px;
}
</style>
</head>
<body id="b1">
<div id="div1">
</div>
<div id="div2">
<input type="text" name="" id="d2i" value="11" />
<button id="d2b">確定</button>
</div>
</body>
</html>
<script type="text/javascript">
dNode = document.getElementById('div1')
dNode.style.color = 'white'
dNode.style.textAlign = 'center'
d2b1 = document.getElementById('d2b')
d2i1 = document.getElementById('d2i')
d2b1.onclick = function(){
r1 = parseInt(Math.random()*255)
r2 = parseInt(Math.random()*255)
r3 = parseInt(Math.random()*255)
p0 = document.createElement('p')
dNode.insertBefore(p0, dNode.firstElementChild)
p0.style.backgroundColor = 'rgba('+r1+','+r2+','+r3+','+'0.6)'
p0.innerText = d2i.value
p0b = document.createElement('button')
p0.appendChild(p0b)
p0b.innerText = 'X'
}
new_dNode = document.getElementById('div1')
p1 = new_dNode.children
console.log(p1)
for (x in p1){
if (x == 'length'){
break
}
p1p = p1[x]
console.log(p1p)
p1pd = p1p.children
p1pd.onClick = function(){
p1pd.remove()
}
}
</script>
