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

时间：2021-10-22 11:07:53

今天需要实现一个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>

jquery 动态添加和删除 ul li列表的更多相关文章

  1. 利用jquery动态添加和删除表格的一行，并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  2. jQuery动态添加、删除按钮及input输入框

    输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...

  3. jQuery动态添加和删除表格行

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. jQuery 动态添加、删除css样式

    1.addClass css中: <style type="text/css">       .chColor {background: #267cb7;color:w ...

  5. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  6. jQuery如何动态添加具有删除按钮的行

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...

  7. jquery动态添加删除div--事件绑定&comma;对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  8. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  9. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. node模块加载层级优化

    模块加载痛点 大家也或多或少的了解node模块的加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载.但是随着应用规模的加大,目录层级越来越深,若是在某个 ...

  2. AS下NDK开发（一）

    捣鼓了一天的NDK,总结下. Eclipse下开发ndk好像挺麻烦的样子,看书上要下载Cygwin,eclipse还要下载插件CDT..而在AS上就方便多啦.下载android ndk.安装,配置环境 ...

  3. TYVJ P1082 找朋友 Label&colon;字符串

    描述 童年的我们,对各种事物充满了好奇与向往.这天,小朋友们对数字产生了兴趣,并且想和数字交朋友.可是,怎么分配这些数字才能使得每个小朋友都唯一地找到一个数字朋友呢?C小朋友说:咱们按自己名字的字典序 ...

  4. CentOS6&period;5&lowbar;Nginx1&period;40&lowbar;Php5&period;57&lowbar;MySQL5&period;5&period;35编译安装全记录

    环境说明:CentOS 6.5 32位  PHP Version 5.5.7  mysql version _5.6.16 一.准备工作 配置防火墙,允许防火墙通过22(sshd).80(WEB).3 ...

  5. Maven source jar get

    Maven作为项目管理的包,同时也能方便的将source-jar下载的本地,省去了每次到网上分别下载的问题. Maven下载Jar包同时下载源文件和文档 示例,在maven生成的工程里面:mvn ec ...

  6. PS 图像特效算法— —渐变

    这个特效利用图层的混合原理,先设置一个遮罩层,然后用遮罩层与原图进行相乘,遮罩层不同,图像最后呈现的渐变效果也不一样. clc;clear all;close all;addpath('E:\Phot ...

  7. javascript 数据类型 -- 分类

    一.概念 Javascript 中有6中基本类型(也称 原始类型/原始值): number . sring . boolean . symbol . undefined 和 null ,和1种引用类型 ...

  8. &lbrack;Swift&rsqb;LeetCode1001&period; 网格照明 &vert; Grid Illumination

    On a N x N grid of cells, each cell (x, y) with 0 <= x < N and 0 <= y < N has a lamp. In ...

  9. verilog HDL-参数型数据对像 与&OpenCurlyQuote;define

    参数新数据对象是用来定义常量的,它可以提升verilog hdl代码的可读性和维护性. verilog hdl支持参数有两种,普通参数和局部参数.普通参数在模块例化时可以从新赋值,局部参数在模块例化时 ...

  10. 线程简述（Thread&rpar;

    线程: 进程是一个正在运行的程序,例如电脑上现在在运行的qq,浏览器,电脑管家,这些都是进程 线程就是每一个进程中的一个执行单元,每一个进程至少一个线程,可以有多个线程,例如浏览器上每一个打开的网页都 ...

相关文章