本文主要給大家簡單介紹一下如何動態的在一個元素添加和刪除一個div,希望能夠得到舉一反三之效。
代碼實例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">#father{ width:150px; height:150px; background-color:red;}#father div{ width:50px; height:50px; background-color:green; font-size:12px;}</style><script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){ $("#father").prepend("<div>武林網歡迎您</div>");})</script></head><body><div id="father"></div></body></html>以上代碼可以在父div中添加一個div，下面再介紹一下如何刪除一個div，下面只給出核心代碼:
$(document).ready(function(){ $("#father").prepend("<div>武林網歡迎您</div>"); $("div").remove("#father div");})以上代碼可以移除添加的div。
示例二：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Add And Close Div</title> <script type="text/javascript教程" > $(document).ready(function(){ bindListener();})function addimg(){ $("#mdiv").append('<div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div>'); // 為新元素節點添加事件偵聽器 bindListener();}// 用來綁定事件(使用unbind避免重復綁定)function bindListener(){ $("a[name=rmlink]").unbind().click(function(){ $(this).parent().remove(); })}</script> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <label>請選擇上傳的圖片</label> <a href="javascript:addimg()" id="addImg">增加圖片</a> <div class="mdiv" id="mdiv"> <div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div> </div> <input type="submit" name="submit" value="上傳圖片" /> </form> </body> </html>相關閱讀:
1.prepend()函數可以參閱jQuery的prepend()方法一章節。
2.remove()函數可以參閱jQuery的remove()方法一章節。
新聞熱點
疑難解答
