<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.demo{
height: 200px;
width: 300px;
}
ul,ol{
list-style: none;
}
b{
margin-left: 100px;
cursor: pointer;
}
li{
width: 300px;
}
b{
float: right;
}
b:hover{
color: red;
}
.btn{
cursor: pointer;
}
</style>
</head>
<body>
<textarea class="demo"></textarea>
<button class="btn">发送</button>
<ul></ul>
<script>
var btn=document.querySelector('.btn')
var text=document.querySelector('.demo')
var ul=document.querySelector('ul')
btn.οnclick=function(){
console.log(typeof text)
if(text.value.trim()==''){
return alert('不能为空')
}
var li=document.createElement('li')
var list=document.querySelectorAll('li')[0]
ul.insertBefore(li,list)
li.innerHTML=text.value+'<b>删除</b>'
text.value=''
var b = document.querySelectorAll('b')
for(var i=0; i<b.length; i++){
b[i].onclick = function(){
this.parentNode.remove()
}
}
}
</script>
</body>
</html>
扫一扫
08-03
6301
6301
02-15
2928
2928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
