今天需要實現一個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:#060 2px solid;margin-top:10px;border-bottom:#060 2px solid;background-color:#690;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:#060;} 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="1"></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>