jquery 动态添加和删除 ul li列表

最新推荐文章于 2019-08-06 11:29:44 发布

weixin_33895016

最新推荐文章于 2019-08-06 11:29:44 发布

阅读量791

点赞数

文章标签： javascript java xhtml ViewUI

今天需要实现一个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" οnerrοr="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>