- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >
- 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="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">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: "<a href="http://hyipaying.com/demo/2010/10/delete.aspx">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>
- "
- //该片段来自于http://www.codesnippet.cn/detail/080520133203.html
来源: http://www.codesnippet.cn/detail/080520133203.html