jquery 动态添加和删除 ul li列表
今天需要实现一个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>
