效果图:
相关知识:
创建元素、添加元素、删除元素以及为元素绑定事件,详情看注释。
代码(需要引入JQ文件):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script>
$(function () {
$('.btn').on('click', function () {
//新建一个li标签
var li = $('<li>' + $('.txt').val() + '<a href="javascript:;">删除</a></li>');
$('ul').prepend(li);
li.slideDown();
$('.txt').val('');
})
//委托事件,把a上的点击事件统一绑定到ul上,而不需要循环绑定。
//ul的slideUp动画触发后,移除ul,此处this指向已改变。
//如果移除代码不写在slideUp的回调函数中,则会来不及表现完slide动画,元素就已经被删除。
$('ul').on('click', 'li a', function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>