第一步：页面的结构剖析

    
 

    

        

        
街机三国

        
删除

    

    

        

        
霸域

        
删除

    

    

        

        
王者农药

        
删除

二.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="
"
                    +"
"
                    +"
王者农药
"
                    +"
删除
"
                    +"
";
            //当前节点插入到某个节点之前insertBefore(后面节点);
            $(node).insertBefore($(".clear"));
            //$("#listbox").append(node);
         });
     })