1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
6 <style type="text/css">
7 *{margin:0px;padding:0px;}
8 body{font-size:12px;}
9
10 .box{margin:10px;padding:10px;}
11 .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
12 .box p{line-height:20px;}
13
14 #allbox{margin:10px;padding:10px;}
15 #allbox div{border:5px solid #aaccff;margin-top:10px;height:50px;}
16
17 </style>
18 <script type="text/javascript">
19 $(function(){
20 $("#allbox div").dblclick(function(){
21 //this 指代当前双击的对象
22 //弹出对话框，确认时候返回true,取消返回false,为true时候执行删除
23 var result = window.confirm("确认删除吗？");
24 if( result==true){
25 $(this).remove();
26 }
27
28 });
29
30 });
31
32 </script>
33
34
35 </head>
36 <body>
37 <div class="box">
38 <h3>试题要求</h3>
39 <p>
40 1.双击allbox的每一个子div时，将被双击的div从界面中删除掉<br />
41 2.删除前弹出确认对话框，确定删除后再执行删除操作
42
43 </p>
44 </div>
45
46 <div id="allbox">
47 <div>box1</div>
48 <div>box2</div>
49 <div>box3</div>
50 <div>box4</div>
51 <div>box5</div>
52 <div>box6</div>
53 </div>
54
55
56 </body>
57 </html>
