您的位置：首页 > Web前端 > JQuery

jQuery动态增加删除li及事件绑定

2016-07-07 08:10 567 查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
}

li{
list-style: none;
}
span{
display: inline-block;
width: 100px;
}

</style>

<script type="text/javascript">
/*
$(function(){
$('button').click(function(){

if($('div').length>0){
$('div').remove();
//remove()移除被选元素，包括文本跟子节点。是真删除了，相当于原生js的	Element.parentNode.removeChild() 在当前父节点中删除元素
}else{

$('body').prepend('<div>123</div>');
//prepend()在当前元素前部插入
}

});

});

var bool = true;
window.onload = function(){
var oS = document.getElementsByTagName('button')[0];

oS.onclick = function(){
if(bool){
var oD = document.getElementsByTagName('div')[0];
oD.parentNode.removeChild(oD);
bool = false;
}else{

var oDd = document.createElement('div');
var body = document.getElementsByTagName('body')[0];
oDd.innerHTML = '123';
body.insertBefore(oDd,oS); //在oS之前插入oDd
bool = true;
}

}

//原生动态增加 删除 元素  要实现这个效果用css中的display就可以实现   我这样写，脑子没问题，刚学jQuery，熟悉熟悉
}

*/
//用jQuery实现的一个可以动态添加删除li   并且可以刷新行数	感觉这代码写的很烂，但又不知道还能怎么优化，有好的建议可以告诉我哈
$(function(){

$('.remove').click(function(){

$(this).parent().remove(); //parent() 返回当前元素集合的父元素

changeSpan();
});//为原有的btn绑定点击时间

$('#add').click(function(){

$('ul').prepend('<li><span></span><button class="remove">删除</button></li>');

$('.remove').click(function(){

$(this).parent().remove();
changeSpan();
});

changeSpan();
});//新增li  并绑定btn点击事件  ， 然后 刷新下行数

function changeSpan(){
for (var i=0;i<$('span').length;i++) {

$($('span')[i]).html(i);

}
}//修改行数

});

</script>

</head>

<body>
<div>div</div>
<!--<button>按钮</button>-->
<button id="btn1">按钮</button>
<ul>
<li><span>1</span><button class="remove">删除</button></li>
<li><span>2</span><button class="remove">删除</button></li>
<li><span>3</span><button class="remove">删除</button></li>
<li><span>4</span><button class="remove">删除</button></li>
<li><span>5</span><button class="remove">删除</button></li>
</ul>

<button id="add">增加</button>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航