发布微博，体现增删查改

css

*{margin: 0; padding: 0;list-style: none;}   
div{width: 500px;border:1px solid #ccc;margin:50px auto;padding: 10px 0 20px 10px;}
ul{padding-left: 70px;}
li{border-bottom:1px dashed #ccc;line-height: 40px;}
li a{width: 48px;height: 23px;border-radius:4px;margin-top: 12px;text-align: center;line-height: 23px;background-color:pink;cursor: pointer;float:right;margin-right: 6px;text-decoration: none;color:black;}
li:hover a{color:red;}
textarea{width: 360px;height: 270px;resize: none;}

html

 <div>
    <span>微博内容</span>
    <textarea></textarea>
    <button>发布</button>
    <ul></ul>
</div>

js

$('button').click(function(event) {
                var txt = $('textarea').val();
                var tx = $('textarea');
                var l = $('<li><span>'+txt+'</span><a href="javascript:;" class="aa">删除</a></li>');
                        if($.trim(txt)==''){
                            alert('请输入内容');
                            tx.focus().val('');
                         }else{
                                   
                             if($.trim(txt)==$('li:first span').text()){ //判断第一条来确认是否重复提交了
                                    alert('请勿重复提交');
                                    tx.focus().val('');
                              }
                             else{
                                     $('ul').prepend(l);
                                     $('li:first').hide().slideDown(300);
                                     tx.focus().val('');
                            }
                         }             
         });
        $(document).on('click', '.aa', function(event) {
            var Mythis = $(this);
            $(this).parent().slideUp(300);
            setTimeout(function(){
                $(Mythis).parent().remove(300);
            },300)
           
        });