jquery生成一个li_JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

  • Post author:
  • Post category:其他


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

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

心若向阳无谓悲伤

.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;

}

$ (function ()

{

$ (‘#add’).click (function ()

{

if($(“#content”).children().length >=5){

alert(“最多允许添加5个”)

return;

}

$(‘#content’).append(‘

‘+$(“#content”).children().length+”);

});

$ (‘#delete’).click (function ()

{

var len = $(“#content”).children().length-1;

if(len >=0){

$(“ul li:eq(“+len+”)”).remove(); //表示删除最后一个元素

}else{

alert(“还没有添加元素哦”);

}

});

})

添加div

删除div

实现效果如下:

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

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



版权声明:本文为weixin_35698059原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。