jQuery動態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
更新時(shí)間：2016年01月15日 10:27:31 作者：xpsharp
這篇文章主要介紹了jQuery動態(tài)添加及刪除表單上傳元素的方法,涉及jQuery的事件動態(tài)綁定及頁面元素動態(tài)操作技巧,并附帶了demo源碼供讀者下載參考,代碼非常簡潔實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了jQuery動態(tài)添加及刪除表單上傳元素的方法。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
點(diǎn)擊此處查看在線演示效果。
具體代碼如下：
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":input[type=button][value=more]").bind("click",function(){
var $br = $("<br />");
var $file = $("<input type='file' name='name1' />");
var $button = $("<input type='button' value='delete'>");
$(this).after($file).after($button).after($br);
$button.bind("click",function(){
$br.remove();
$file.remove();
$button.remove();
})
})
});
</script>
</head>
<body>
<input type="file" name="file1" /><input type="button" value="more" />
</body>
</html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Jquery Ajax Error 調(diào)試錯(cuò)誤的技巧
jquery在程序開發(fā)ajax應(yīng)用程序時(shí)提高了效率，減少了需要兼容性的問題，當(dāng)我們在ajax項(xiàng)目中，遇到ajax異步獲取數(shù)據(jù)出錯(cuò)該怎么解決呢，我們可以通過捕捉error事件來獲取出錯(cuò)的信息，本文給大家介紹jquery ajax error調(diào)試錯(cuò)誤的技巧，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jQuery動態(tài)產(chǎn)生select option下拉列表
這篇文章主要介紹了jQuery動態(tài)產(chǎn)生select option下拉列表的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)HTML元素隱藏和顯示
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)HTML元素隱藏和顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Prop和attr的作用類似，相同點(diǎn)：兩者都可以獲取屬性值和設(shè)置屬性值，下面為大家介紹下具體的使用2013-12-12
jquery追加元素的所有方法全面深入實(shí)例講解（append、prepend、after、before、wrap等等）
幾乎所有網(wǎng)站的開發(fā)都離不開jQuery，jQuery可以很方便的實(shí)現(xiàn)網(wǎng)頁中的一些效果，也很輕松的對網(wǎng)頁中的一些DIV元素進(jìn)行添加，修改或刪除的操作。由于不同位置追加元素的代碼不一樣，本文實(shí)例講解如何對網(wǎng)頁中某個(gè)指定的DIV進(jìn)行元素的追加操作。2023-03-03
jQuery實(shí)現(xiàn)的簡單折疊菜單(折疊面板)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單折疊菜單(折疊面板)效果代碼,涉及jQuery中slideToggle與toggleClass方法的靈活使用技巧,需要的朋友可以參考下2015-09-09
本篇文章是對jQuery中的自動完成組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
在jquery中自定義函數(shù)你會嗎？今天抽時(shí)間寫了幾個(gè)，個(gè)人感覺還不錯(cuò)，喜歡的朋友可以了解下2014-01-01
一個(gè)圖片切換效果，胡亂寫了一下。貌似doctype到了html4.01下面樣式有點(diǎn)問題。2010-07-07
jQuery中DOM節(jié)點(diǎn)刪除之empty與remove
DOM節(jié)點(diǎn)刪除相信對每個(gè)初學(xué)jQuery的新手們來說都不陌生，下面這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)刪除之empty與remove的相關(guān)資料，有需要的朋友可以參考借鑒，感興趣的下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01