<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#box{
400px;
height: 420px;
background-color: pink;
padding-top: 30px;
margin: auto;
}
.title,.end{
300px;
margin: auto;
}
input{
280px;
height: 80px;
border-radius: 10px;
padding: 0 10px;
margin: 0;
border:0;
}
.text{
display: inline-block;
300px;
height: 30px;
border-radius: 10px;
background-color: red;
text-align: center;
line-height: 30px;
margin-top: 15px;
}
.end{
margin-top: 10px;
}
li{
100%;
height: 30px;
overflow: hidden;
line-height: 30px;
}
.row{
float: left;
}
.delete{
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div class="title">
<input type="text">
<span class="text">提交</span>
</div>
<ul class="end"></ul>
</div>
<script>
//获取需要操作的元素
var inp = document.querySelector('input');
var btn = document.querySelector('.text');
var end = document.querySelector('.end');
//添加点击事件
btn.onclick = function () {
//如果没有输入内容时要做的事情
if(inp.value == ''){
alert('请输入内容');
return;
}
//生成输入的内容
end.innerHTML += '<li><span class="row">'+inp.value+'</span><span class="delete">删除</span></li>';
//清空value值
inp.value = '';
}
//点击事件
end.onclick = function(ev){
var ss = ev.target;
//绑定事件 利用父级删除子级；
if(ss.getAttribute('class')=='delete'){
end.removeChild(ss.parentNode);
}
}
</script>
</body>
</html>