<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style-type: none;}
*{margin:0;padding: 0;}
.box {
margin: 100px auto;
600px;
height: auto;
border:1px solid #333;
padding: 30px 0;
}
textarea {
450px;
resize: none; /*防止用户拖动 右下角*/
}
.box li {
450px;
line-height: 30px;
border-bottom:1px dashed #ccc;
margin-left: 80px;
}
.box li a {
float: right;
}
</style>
</head>
<body>
<div class="box">
微博发布: <textarea name="" id="txt" cols="30" rows="10"></textarea> <button id="btn">发布</button>
<ul id="u"></ul>
</div>
</body>
</html>
<script src="../../public.js"></script>
<script>
$id("btn").onclick = function(){
var str = $id("txt").value.trim();
if( str.length == 0 ){
return;
}
var oLi = create("li");
oLi.innerHTML = str + "<a href='javascript:;' class='del'>删除</a>";
$id("u").insertBefore( oLi , $id("u").children[0] );
//找到类名类del的超链接标签
var btnDel = document.getElementsByClassName("del");
for( var i = 0 ; i < btnDel.length ; i++ ){
btnDel[i].onclick = function(){
if( confirm("确定要删除么？") ){
//删除当前行
this.parentNode.remove();
}
}
}
}
</script>