快捷導(dǎo)航

jQuery動(dòng)態(tài)添加、刪除元素的方法

更新時(shí)間：2014年01月09日 15:44:56 作者：

添加、刪除元素在項(xiàng)目中經(jīng)常會(huì)用到，下面為大家介紹下使用jQuery對(duì)元素進(jìn)行動(dòng)態(tài)添加和刪除，具體的實(shí)現(xiàn)如下，希望對(duì)大家有所幫助

 
<script> 
$.schoolFn = { 
addItem: function(obj){ 
$("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"<input type='hidden' name='audiences' value='"+obj+"'><button type='button' class='close delete-btn deleteItem' onclick='deleteItem(this);' title='刪除'>×</button></li>"); 
}, 

removeItem: function(obj){ 
$("#"+obj).replaceWith(""); 
} 
} 
$("#itemAdd").click(function(){ 
var item=$('#teacherInput').val(); 
$.schoolFn.addItem(item); 
$('#teacherInput').val(""); 
}); 
function deleteItem(obj){ 
var item=$(obj).parents(".list-group-item").attr("id"); 
$.schoolFn.removeItem(item); 
} 
</script> 

您可能感興趣的文章:

相關(guān)文章

jquery高效反選具體實(shí)現(xiàn)
反選想必大家都有一個(gè)比較獨(dú)特的方法吧，下面與大家分享下利用jquery實(shí)現(xiàn)高效反選，具體代碼如下感興趣的朋友可以參考下哈
2013-05-05
將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼
這篇文章主要介紹了將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼的方法，以及jquery.qqface.js的使用方法，需要的朋友可以參考下
2017-12-12
jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
jQuery Form表單取值的方法
這篇文章主要介紹了jQuery Form表單取值的方法，之前js取form表單的值都是一個(gè)一個(gè)的取，數(shù)量一多之后容易出錯(cuò)而且煩透了。具體jq form表單取值方法，大家通過本文學(xué)習(xí)下吧
2017-01-01
JQuery彈出炫麗對(duì)話框的同時(shí)讓背景變灰色
這篇文章主要介紹JQuery實(shí)現(xiàn)彈出炫麗對(duì)話框的同時(shí)讓背景變灰色效果,需要的朋友可以參考下
2014-05-05
使用jquery給新生的th綁定hover事件的實(shí)例
下面小編就為大家?guī)硪黄褂胘query給新生的th綁定hover事件的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
jquery實(shí)現(xiàn)人性化的有選擇性禁用鼠標(biāo)右鍵
與其使用比較暴力的手段禁用鼠標(biāo)右鍵，還不如有選擇性人性化的的禁用鼠標(biāo)右鍵,需要的朋友可以參考下
2014-06-06
jQuery實(shí)現(xiàn)點(diǎn)擊該行即可刪除HTML表格行
本節(jié)任務(wù)是從一個(gè)HTML表使用一些時(shí)髦的效果，只要按一下該行的行。以下是實(shí)現(xiàn)這一目標(biāo)的jQuery代碼
2014-10-10
jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08