|
阅读：10979回复：4
操作DOM的一个示例,添加删除节点图片：addType.jpg 
需求： 水平线下面的显示所有类型，用户可以点击+，进行添加。添加的类型，显示在水平线上面。添加后类型，用户可以选择删除。写了一个DEMO，代码如下： 样式： <style>
ul li{
height: 100px;
width: 100px;
border: 1px solid black;
float:left;
list-style-type: none;
}
.add,.del{
font-size: 20px;
}
</style>页面与CSS
<body>
<div id="divBind">
<ul id="ulBind">
</ul>
</div>
<div style="clear:both;"></div>
<hr/>
<div id="divType">
<ul>
<li>类型01<span class="add">+</span></li>
<li>类型02<span class="add">+</span></li>
<li>类型03<span class="add">+</span></li>
<li>类型04<span class="add">+</span></li>
<li>类型05<span class="add">+</span></li>
</ul>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
var liArr = [];
window.onload=function(){
$("#divType").on("click",".add",function(){
var newLi = $(this).parent().clone(true);
newLi.find("span.add").text("-");
newLi.find("span.add").removeClass("add").addClass("del");
console.log(newLi[0]);
$("#ulBind").append(newLi[0]);
liArr.push(newLi[0]);
});
$("#ulBind").on("click",".del",function() {
var currentLi = $(this).parent();
for(var i=0;liArr.length;i++){
if(liArr==currentLi[0]){
liArr.splice(i,1);
currentLi.remove();
break; //跳出循环
}
}
});
}
</script>
</body> |
|
|
|
地板#
发布于：2018-06-22 09:37
666，又涨姿势了
|
|
|
4楼#
发布于：2018-06-22 09:36
invalid functionality in download button
|
|
