<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="float: left;" id="div1">
<div style="text-align: center;line-height: 30px; id="div2" >
<button style=" width: 20px;height: 30px;" id="bt1" >X<p id="div3" style=" width: 200px;height: 30px; background-color: rgb(144,144,144) ">香蕉</p></button>
<br/>
<button style=" width: 20px;height: 30px;" id="bt1" >X<p id="div3" style=" width: 200px;height: 30px; background-color: rgb(144,144,144) ">火龙果</p></button>
<br/>
<button style=" width: 20px;height: 30px;" id="bt1" >X<p id="div3" style=" width: 200px;height: 30px; background-color: rgb(144,144,144) ">西瓜</p></button>
</div>
<br />
<br />
<input type="" name="i1" id="i1" value="" >
</div>
</body>
</html>
<script type="text/javascript">
iNode = document.getElementById('i1')
iNode.onchange = function(){
iNodes = iNode.value
p1Node = document.createElement('p')
div1Node = document.getElementById('div1')
div1Node.insertBefore(p1Node, div1Node.firstElementChild)
// div1Node.appendChild(p1Node)
red = parseInt(Math.random()255)
green = parseInt(Math.random()255)
blue = parseInt(Math.random()*255)
p1Node.style = "background-color:rgb("+red+","+green+","+blue+");width: 200px;height: 30px;text-align: center;"
p1Node.innerText = iNodes
}
div1Node = document.getElementById('div1')
div2Node = document.getElementById('div2')
div3Node = document.getElementById('div3')
btn1Node = document.getElementById('bt1')
div1Node.onclick = function(){
dNode = btn1Node.parentElement
div2Node.remove(dNode)
}
</script>
