canrun
<html> <head> <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var num = 1; $(document).ready(function(){ $("#add").click(function(){ $("#new").append('<div id="new_sub'+num+'" class="sub"><span>new_sub'+num+' </span><span class="del"> X </span></div>'); $(".del").click(function(){ $(this).parent().remove(); }); num++; }); }); </script> <style type="text/css"> #add {background:#abc;width:15%;text-align:center;cursor:pointer;} .new_sub_c{background:#dde;} .del {color:red;border:1px solid yellow;float: right;cursor:pointer;} .sub {border: 1px solid #AABBCC;height: 90px;width: 150px;} </style> </head> <body> <div id="add"><u>Click to Add a DIV</u></div> <div id="new"></div> </body> </html> <!-- 摘要效果 --> <!-- <div id="add" onclick='var num=!$("#new").val()|$("#new").val() $("#new").append("<div class=\"sub\"><span>new_sub"+num+"</span><span class=\"del\">X</span></div>") $(".del").click(function(){ $(this).parent().remove() });num++;$("#new").val(num)'>Click it</div> <div id="new"></div> <style>.sub{border:1px solid #abc;29.2%;height:90px}.del{padding:0 4px;text-indent:0;color:red;float:right;background:#EBEBEB}#add{background:#abc;29.5%;text-align:center;text-indent:0}</style> -->