仿微博发布效果

 $(function(){
        $(".btn").on("click",function(){
            var li=$("<li></li>");
            li.html($(".txt").val()+"<a>删除</a>");
            $("ul").prepend(li);
            $("li").slideDown();
        })
        $("ul").on("click","a",function(){   //使用事件委托的方法可以给后来添加的元素添加事件
            $(this).parents("li").slideUp(function(){  // 可以先让li上滑隐藏掉再删除
                $(this).remove("li");
            });
        })
    })

HTML：

    <div class="con">
        <span>微博发布</span>
        <input type="text" class="txt">
        <input type="button" value="发布" class="btn">
    </div>
    <ul>
    </ul>

　　

来源：https://www.cnblogs.com/qtbb/p/11349754.html