问题遇到的现象和发生背景
用代码块功能插入代码，请勿粘贴截图
我想要达到的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
a,ol{
list-style: none;
}
.home{
margin: 100px auto;
width: 350px;
background-color: antiquewhite;
}
.btn{
height: 35px;
width: 150px;
}
textarea{
width: 300px;
height: 200px;
}
li:nth-child(even){
background-color: blueviolet;
}
.home>div:nth-child(2){
background-color: aquamarine;
}
.colorBox{
box-sizing:border-box;
padding-left: 10px;
position: relative;
width: 100%;
height: 30px;
font-size: 15px;
line-height: 30px;
background: linear-gradient(#DC1010, #ed9a5a, #dce82f);
}
.del{
position: absolute;
right: 20px;
width: 60px;
height: 18px;
top: 50%;
margin-top:-9px ;
background-color: rgb(47, 93, 244);
border: 0px solid black;
border-radius: 5px;
outline: none;
}
</style>
<body>
<div class="home">
<div>
<button class="btn">press</button><br>
<textarea placeholder="请输入名字"></textarea>
</div>
<div>
<ol>
<li>good morning</li>
<li>good morning</li>
<li>good morning</li>
<li>good morning</li>
<li>good morning</li>
</ol>
</div>
</div>
<script>
let btn = document.querySelector('.btn')
btn.addEventListener('click',function(){
let color = document.createElement('div')
color.className = 'colorBox'
color.innerHTML=`
<input type="checkBox">
<span>男/女</span>
<button class="del">删除</button>`
document.querySelector('.home').appendChild(color)
color.onclick = function(e){
if(e.target.className=='del'){
console.dir(e.target.style);
window.setTimeout(()=>{
this.parentNode.removeChild(this)
},1000)
}else{
console.log('no');
}
}
})
</script>
</body>
</html>
