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


Posted in jQuery onOctober 16, 2019

本文实例讲述了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>

实现效果如下:

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

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

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

jQuery 相关文章推荐
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
You might like
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
Python数据类型详解(二)列表
2016/05/08 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python实现实时视频流播放代码实例
2020/01/11 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
生物科学系大学生的自我评价
2013/12/20 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
校园标语大全
2014/06/19 职场文书
道路施工安全责任书
2014/07/24 职场文书
教师演讲稿开场白
2014/08/25 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
个人作风建设总结
2014/10/23 职场文书
经理岗位职责范本
2015/04/15 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android