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封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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中的string类型使用说明
2010/07/27 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
电气自动化自荐信
2013/10/10 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
美术国培研修感言
2014/02/12 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2015年党总支工作总结
2015/05/25 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js