<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
<script>
//点击发布按钮
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
$("ul").append(li);
li.slideDown();
$(".txt").val("");
//点击删除
})
//点击删除按钮
$("ul").on("click", "a", function() {
$(this).parent().slideUp(function() {
$(this).remove;
});
})
</script>
</body>
</html>运行结果
