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