jQuery ajax剔除 _Ajax

jQuery ajax删除
jQuery ajax删除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery学习-ajax删除</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        h1{color:Green;}
        body{ background-color:#EEEEEE ; }
        .list{
                background:#EEEEEE none repeat scroll 0 0;
                border-top:1px solid #CCCCCC;
                padding:5px 10px;
                width:300px;
             }
        .del{
                color:Blue;
                display:block;
                float:right;
                width:35px;
            }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".del").click(function() {
                var $p = $(this).parent();
                var $this = $(this);
                $.ajax({
                    type: "post",
                    url: "http://hyipaying.com/demo/2010/10/delete.aspx",
                    //得到id
                    data: { id: $this.attr("id").replace('del-', '') },
                    beforeSend: function() {
                        //发送请求前改变背景色
                        $p.css("backgroundColor", "#FB6C6C");
                    },
                    success: function() {
                        //删除成功
                        $p.slideUp(300, function() {
                            //移除父级div
                            $p.remove();
                        });
                    }
                });
		//阻止浏览器默认事件
		return false;
            });
        });
       
    </script>
</head>
<body>
    <div>
 
        <h1>jQuery ajax删除</h1>
        <div class="list">
            <a id="del-1" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
            <div class="list">
            <a id="del-2" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
        <div class="list">
            <a id="del-3" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
        <div class="list">
            <a id="del-4" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
        <div class="list">
            <a id="del-5" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
    
    </div>
</body>
</html>
"