案例：发布微博功能

<!-- 页面布局 -->
<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();
        });
    });
});