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>