今天需要实现一个jquery动态添加和删除 ul li列表中的li行，自己简单的实现乐一个，分享一下
<!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>jQuery add/remove ul li</title> <style type="text/css">
#nav{width:1000px;height:450px;border-top:# 2px solid;margin-top:10px;border-bottom:# 2px solid;background-color:#;margin-left:50px;}
#nav ul{list-style:none;line-height:40px;}
#nav li{display:block;float:left;padding:15px;line-height:50px;}
#nav a{display:block;color:#fff;text-decoration:none;padding:0px;}
#nav a:hover{background-color:#;}
input {margin-top:10px;margin-left:50px;width:100px;height:50px;font-size:15px;}
</style> <script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//按钮的点击事件，每次点击的时候动态的创建一个 li对象，jquery直接通过 ul对象的id，使用 append 方法 动态的把li添加到ul里面
$("#addButton").bind("click",function(){
var google = Math.random();
var msg = "<li><a href='javascript:void(0)'>删我</a><span style='color:yellow;'>" + google + "</span></li>";
$("#colist").append(msg);
//每次添加万一个元素后，都会给改li绑定移除事件
bindListener();
});
//
function bindListener(){
//给所有的 ul li重新绑定移除事件
$("#colist li a").unbind().click(function(){
//直接通过.remove() 方法移除掉li元素,页面自动就会刷新
$(this).parent().remove();
});
}
//jquery 检索ul li的所有元素
$("#collect").click(function(){
var data = "";
$("#nav").find("ul li span").each(function(index,value){
data += $(this).text() + "|";
})
alert(data);
})
})
</script> </head> <body> <div id="nav">
<ul id="colist">
</ul>
</div> <input type="button" value="通过jquery动态添加一个心的li" id="addButton" />
<input type="button" value="查询所有的li信息" id="collect" /> </body>
</html>
上面是一个简单的测试例子，下面是项目中实际使用的例子
对应的js方法
<script>
function addTocustom(appid)
{
//这里remove 改行，然后保存数据库
//父页面刷新定制窗口，重新加载
//window.parent.backclose();
$("#show_"+appid).parent().parent().parent().remove(); }
</script>
对应的div ul li的代码，点击添加按钮后 ，会把该行数据添加到别的页面，并删除改行数据
<div id="entrance" class="entrance">
<c:if test="${!(empty appList)}">
<c:set var="count" value=""></c:set>
<ul class="entrance-appsnew-list">
<c:forEach var="item" items="${appList}">
<li class="entrance-appsnew-item">
<a target="_blank" href="${item.APP_URL}" title="${item.APP_NAME}" >
<img class="entrance-appsnew-icon" id="PIC_SHOW" onerror="this.src='${fn:getLink('manage/img/app/large-default.png')}'" src="${fn:getLink('appImageShow.do')}?type=app&picId=${item.picLib.PIC_ID}"/>
</a>
<div class="entrance-appsnew-cont"">
<div class="entrance-appsnew-title">
<h3 class="txt">
<a target="_blank" title="${item.APP_NAME}" href="${item.APP_URL}" >${item.APP_NAME}</a>
</h3>
<span class="cfont count show${item.APP_ID}" id="show_${item.APP_ID}"><a href="javascript:addTocustom('${item.APP_ID}')">添加</a></span>
</div>
</div>
</li>
<c:set var="count" value="${count+1 }"></c:set>
</c:forEach>
</ul>
</c:if>
</div>