动态的添加或者删除指定元素代码实例:
本章节介绍一段代码实例，能够动态的添加或者删除指定的元素，这里不管实际应用中此代码出现的概率有多大，只在于如何实现类似的功能，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.container{
width:1000px;
margin:0 auto;
}
.top{
height:25px;
line-height:25px;
}
.top select{
width:80px;
height:22px;
line-height:22px;
}
.add{line-height:30px;}
li{list-style:none;}
span{
cursor:pointer;
color:red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
var getval=$("select").val();
$(".add").append(‘<li>‘+getval+‘<span>X</span></li>‘);
});
});
$("span").live("click",function(){
$(this).parent().remove();
});
</script>
</head>
<body>
<div class="container">
<div class="top">
<select>
<option>蚂蚁部落一</option>
<option>蚂蚁部落二</option>
<option>蚂蚁部落三</option>
<option>蚂蚁部落四</option>
<option>蚂蚁部落五</option>
</select>
<input value="查看效果" type="button"/>
</div>
<div class="add"></div>
</div>
</body>
</html>
上面的代码中，点击按钮可以实现添加一个li元素，li元素中的内容就是选中的option项的文本内容，点击新添加元素的尾部的红色叉号，可以删除当前元素，下面就介绍一下它的实现过程。
一.代码注释:
1.$(function(){})，文档结构完全加载完毕再去执行函数中的代码。
2.$("input").click(function(){})，为按钮注册click事件处理函数。
3.var getval=$("select").val()，获取select下拉菜单的value值，也就选中项的value值，如果otpion项没有规定value属性值，那么text文本内容将作为value属性值。
4.$(".add").append(‘<li>‘+getval+‘<span>X</span></li>‘)，为class属性值为add的元素追加新的内容。
5.$("span").live("click",function(){})，为span元素注册click事件处理函数，这里live函数建议用on替代。
6.$(this).parent().remove()，删除当前元素的父元素，也就是li元素。
二.相关阅读:
1.append()函数可以参阅jQuery的append()方法一章节。
2.live()函数可以参阅jQuery的live()函数的用法介绍一章节。
3.parent()函数可以参阅jQuery的parent()方法一章节。
4.remove()函数可以参阅jQuery的remove()方法一章节。
5.on()函数可以参阅jquery的on()、bind()、live()和delegate()区别简单介绍一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14451
更多内容可以参阅:http://www.softwhy.com/jquery/