Jquery動(dòng)態(tài)添加及刪除頁面節(jié)點(diǎn)元素示例代碼

更新時(shí)間：2014年06月16日 17:04:27 投稿：whsnow

這篇文章主要介紹了Jquery如何動(dòng)態(tài)添加及刪除頁面節(jié)點(diǎn)元素，示例代碼如下，需要的朋友不要錯(cuò)過

通常我們會(huì)遇到選中某個(gè)條件，然后添加，累計(jì)多個(gè)后，再進(jìn)行執(zhí)行。

廢話不多說，直接上代碼！

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Jquery動(dòng)態(tài)添加及刪除頁面節(jié)點(diǎn)</title> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><!--引用jqurey庫文件--> 
<style> 
.container{ width:1000px; margin:0 auto;} 
.top{ height:25px; line-height:25px;} 
.top select{ width:80px; height:22px; line-height:22px;} 
.top input{ width:56px; height:22px;} 
.add{ line-height:30px;} 
li{ list-style:none;} 
span{cursor:pointer;} 
</style> 
<script> 
$(function(){//頁面加載完畢后執(zhí)行 
$("input").click(function(){//添加操作 
var getval=$("select").val();//獲取當(dāng)前選中的select值 
$("p").before('<li>'+getval+'<span>X</span></li>');//在p標(biāo)簽前加入所要生成的代碼 
}); 
}); 
$("span").live("click",function(){//通過 live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素） 
$(this).parent().remove();//移除當(dāng)前點(diǎn)擊元素的父元素 
}); 
</script> 
</head> 

<body> 
<div class="container"> 
<div class="top"> 
<select> 
<option>我是一號(hào)</option> 
<option>我是二號(hào)</option> 
<option>我是三號(hào)</option> 
<option>我是四號(hào)</option> 
<option>我是五號(hào)</option> 
</select> 
<input value="添 加" type="button"/> 
</div> 
<div class="add"><p></p></div> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jquery中用jsonp實(shí)現(xiàn)搜索框功能
這篇文章主要為大家詳細(xì)介紹了jquery中用jsonp實(shí)現(xiàn)搜索框功能的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jquery獲取當(dāng)前點(diǎn)擊對(duì)象的value方法
這篇文章主要介紹了jquery如何獲取當(dāng)前點(diǎn)擊對(duì)象的value,需要的朋友可以參考下
2014-02-02
jQuery 在光標(biāo)定位的地方插入文字的插件
jQuery 在光標(biāo)定位的地方插入文字的插件的實(shí)現(xiàn)代碼，通過獲取光標(biāo)位置，然后插入文字
2012-05-05
jQuery動(dòng)態(tài)背景圖片效果實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery動(dòng)態(tài)背景圖片效果實(shí)現(xiàn)方法,涉及javascript隨機(jī)數(shù)及動(dòng)態(tài)設(shè)置css樣式的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下
2015-07-07
jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
這篇文章主要介紹了jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起的功能,實(shí)例分析了jQuery中slideUp方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jquery代碼實(shí)現(xiàn)簡單的隨機(jī)圖片瀑布流效果
瀑布流布局最近真的很流行，很多人都跟我一樣想知道是怎么做出來的吧，經(jīng)過網(wǎng)上搜索大量的參考結(jié)合N邊的實(shí)驗(yàn)今天終于被我寫出來了,這里分享給大家，有需要的小伙伴參考下吧。
2015-04-04
javaScript和jQuery自動(dòng)加載簡單代碼實(shí)現(xiàn)方法
給大家介紹一下利用javaScript和jQuery實(shí)現(xiàn)自動(dòng)加載最簡單的代碼寫法。
2017-11-11
jquery關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼
jquery 關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-01-01
jQuery擴(kuò)展方法實(shí)現(xiàn)Form表單與Json互相轉(zhuǎn)換的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了jQuery擴(kuò)展方法實(shí)現(xiàn)Form表單與Json互相轉(zhuǎn)換的相關(guān)知識(shí)，并給大家介紹了jquery兩種擴(kuò)展方法,需要的朋友可以參考下
2018-09-09
jquery實(shí)現(xiàn)簡單的瀑布流布局
瀑布流布局有兩種，一種是固定列，一種是非固定列。本文主要記述第一種的實(shí)現(xiàn)。需要的朋友可以參考借鑒
2016-12-12