jQuery實現(xiàn)動態(tài)添加和刪除一個div
本文主要給大家簡單介紹一下如何動態(tài)的在一個元素添加和刪除一個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>'); // 為新元素節(jié)點添加事件偵聽器 bindListener(); } // 用來綁定事件(使用unbind避免重復(fù)綁定) 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>
相關(guān)閱讀:
1.prepend()函數(shù)可以參閱jQuery的prepend()方法一章節(jié)。
2.remove()函數(shù)可以參閱jQuery的remove()方法一章節(jié)。
相關(guān)文章
jQuery利用DOM遍歷實現(xiàn)商城結(jié)算系統(tǒng)實戰(zhàn)
這篇文章主要介紹了jQuery利用DOM遍歷實現(xiàn)商城結(jié)算系統(tǒng)實戰(zhàn),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具一定的參考價值,感興趣的小伙伴可以參考一下2022-06-06解決jquery validate 驗證不通過后驗證正確的信息仍殘留在label上的方法
在本篇文章里小編給大家整理了關(guān)于解決jquery validate 驗證不通過后驗證正確的信息仍殘留在label上的方法,有需要的朋友們可以學(xué)習(xí)下。2019-08-08jQuery實現(xiàn)帶玻璃流光質(zhì)感的手風(fēng)琴特效
這篇文章主要介紹了jQuery實現(xiàn)帶玻璃流光質(zhì)感的手風(fēng)琴特效,是一款基于jQuery+CSS3實現(xiàn)手風(fēng)琴特效,希望你可以喜歡。2015-11-11iframe異步加載實現(xiàn)點擊左邊菜單加載右邊內(nèi)容實例講解
iframe異步加載想必很多朋友對你都不會陌生,接下來將實現(xiàn)這樣一個功能左邊菜單不能刷新的情況下,異步加載右邊的內(nèi)容頁面,感興趣的你可以參考下本文或許對你有所幫助2013-03-03jQuery根據(jù)緯度經(jīng)度查看地圖處理程序
jQuery根據(jù)緯度經(jīng)度查看地圖處理程序如下在這里要注意js的引入順序,有需求的朋友可以參考下哈希望對你有所幫助2013-05-05jQuery實現(xiàn)的導(dǎo)航動畫效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的導(dǎo)航動畫效果,可實現(xiàn)導(dǎo)航條的底部橫條隨鼠標(biāo)移動的效果,涉及jQuery針對鼠標(biāo)事件的響應(yīng)及頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04jQuery Selectors(選擇器)的使用(一、基本篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實例方式進行講述,以簡單,全面為基礎(chǔ),不會涉及很深。2009-12-12