<!-- 页面布局 --> <div class="box" id="weibo"> <span>微博发布</span> <textarea class="txt" col="30" row="10"></textarea> <button class="btn">发布</button> <ul></ul> </div>
// JS逻辑代码 $(function() { // 1. 点击发布按钮,动态创建一个小li,放入文本框的内容和删除按钮,并且添加到ul中 $(".btn").on("click", function() { var li = $("<li></li>"); li.html($(".txt").val() + "<a href='javascript:;'>删除</a>"); $("ul").prepend(li); li.slideDown(); $(".txt").val(""); }); // 2. 点击的删除按钮,可以删除当前的微博留言li $("ul").on("click", "a", function() { // this是当前的a标签,等待隐藏之后再删除这个小li $(this).parent().slideUp(function() { $(this).remove(); }); }); });