jQuery游戏节点的动态新增和删除的实现
第一步：页面的结构剖析<!-- 页面结构，最外层的是一个div.盒子容器；
3个单独的dl,带有项目和描述的描述列表
dl的结构：包括一个dt（标题）若干个dd描述；
两个目标：
第一个：删除功能；删除游戏本身；
第二个：新增游戏;新增的是一个dl节点,包含了若干的html代码。
-->
<div id='listbox'>
<dl>
<dt><img src="images/p1.jpg" /></dt>
<dd>街机三国</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="images/p2.jpg" /></dt>
<dd>霸域</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="images/p3.jpg" /></dt>
<dd>王者农药</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<div class='clear'></div>
<input type="button" value='新增游戏'class='add'/>
</div>二.CSS 样式设置
*{
margin:0px;
padding:0px;
font-size:12px;
}
#listbox{
margin:10px;
padding:15px;
border:1px solid #CCCCCC;
color:#0066FF;overflow: auto;
}
dl{
display:block;
float:left;
margin:15px;
}
dd{
font-size:14px;
color:#663300;
}
dd a{
text-decoration:none;
font-size:14px;
color:#FF3300;
}
dd a:hover{
text-decoration:underline;
}
.clear{
clear:both;
height:0px;
}三.JQuery代码的实现
//游戏待完善代码
//Author:写上你的名字；
$(function(){//加载事件;
//任务1：先找删除选择器a标签
// $(".del").click(function(){
////要明白删除的是哪个选择器对象;删除按钮和要删除对象的关系
////要掌握当前节点和待删除节点的关系；
//$(this).parent().parent().remove();
// });
//动态删除新增节点
$(document).on('click', '.del', function () {
$(this).parent().parent().remove();
});
//删除代码结束，其他代码开始
$(".add").click(function(){
//定义了一个node对象，让它赋值为待增加的html元素；
let node="<dl>"
+"<dt><img src='images/p4.jpg' /></dt>"
+"<dd>王者农药</dd>"
+"<dd><a class='del' href='javascript:void(0);'>删除</a></dd>"
+"</dl>";
//当前节点插入到某个节点之前insertBefore(后面节点);
$(node).insertBefore($(".clear"));
//$("#listbox").append(node);
});
})四.效果展示
文档来源：51CTO技术博客https://blog.51cto.com/u_2096101/3185524
页:
[1]