JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能。分享给大家供大家参考，具体如下：

最近为了实现这个简单的功能也是看了很多的内容，终于找出了看起来简单易实现的方法，我觉得能用最简洁的代码实现，就不要写的那么复杂，看也看不懂。先码着，为后面的项目做做准备。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="心若向阳">
<title>心若向阳无谓悲伤</title>
<style type="text/css">
    .item{
        background: #C0C0C0;
        border-radius: 20px;
        margin-bottom: 10px;
        height:40px;
        padding-left: 20px;
        color:white;
        font-family: "微软雅黑";
        text-align: center;
        padding-top: 15px;
    }
    #content{
        list-style: none;
    }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$ (function ()
{
$ ('#add').click (function ()
{
    if($("#content").children().length >=5){
        alert("最多允许添加5个")
        return;
    }
$('#content').append('<li class="item" >'+$("#content").children().length+'</li>');
});
$ ('#delete').click (function ()
{
    var len = $("#content").children().length-1;
    if(len >=0){
     $("ul li:eq("+len+")").remove(); //表示删除最后一个元素
    }else{
        alert("还没有添加元素哦");
    }
});
})
</script>
</head>
<body>
    <div >
        <ul id="content">
        </ul>
    </div>
<button id="add">添加div</button>
<button id="delete">删除div</button>
</body>
</html>

实现效果如下：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • Jquery为DIV添加click事件的简单实例

    今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function

  • jquery slibings选取同级其他元素的实现代码

    jquery slibings选取同级其他元素的实现代码

    复制代码 代码如下: <script type="text/javascript">$(function(){    $("#downloadchartsright .chartstitleopt,#downloadchartsleft .chartstitleopt").click(function(){        $(this).siblings().removeClass('underline').end().addClass('underli

  • jQuery为iframe的body添加click事件的实现代码

    html结构如下: 复制代码 代码如下: <html> <head> <title>为body添加click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="jquery-1.5.2.js&quo

  • jQuery 滑动方法slideDown向下滑动元素

    jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换. jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素. 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果

  • jQuery动态添加li标签并添加属性和绑定事件方法

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q

  • jQuery页面元素动态添加后绑定事件丢失方法,非 live

    代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="Add" name="test_but" /> <div id="test_div"><input name="test_input"/></div> <script> $('input[

  • JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例

    本文实例讲述了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法.分享给大家供大家参考,具体如下: siblings()属于jQuery筛选类的API,用来查找某个元素的所有同辈元素(所有兄弟姐妹). <div id="contentHolder"> <input type="button" value="1" id="button1"></input> <inpu

  • 轻松实现jQuery添加删除按钮Click事件

    轻松实现jQuery添加删除按钮Click事件

    大家登陆一些网站或论坛时,经常会被要求先浏览和确认"用户协议"."用户协议"底部通常会设置一个"我已阅读并同意"复选框,勾选了该复选框,"登陆"按钮才可用. 如下图所示,勾选"I have read and accept."复选框,Login按钮才会相应click事件,登陆成功后切换到欢迎画面. 通常情况我们是怎么实现的呢,很多同学会想到用javascript设置按钮的disabled属性.这当然是一种不错

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

随机推荐