js点击左边列表内容添加到右边列表

文章描述:

jQuery点击把当前元素条件到另一个模块里面

<div class="container">
    <div class="copy-list fl">
        <ul  id="mainUl">
            <li class="list-group-item">英雄联盟</li>
            <li class="list-group-item">绝地求生</li>
            <li class="list-group-item">地下城与勇士</li>
        </ul>
    </div>
    <div class="copy-res fl">
        <ul id="showUl">
             
        </ul>
    </div>
    
</div>
*{ margin:0; padding:0;}
html,body{ font-family: Arial,Helvetica,Verdana,sans-serif; font-weight: 400; font-size: 14px; background-color: #f5f5f5; color: #333;}
.fl{float:left;}
.fr{float:right;}
.copy-list{ margin:40px 0; width:300px; background:#fff; padding:50px 30px; min-height:600px;}
.copy-list ul li{ margin:10px 0; background:#00AAEE; color:#fff;}
.copy-res{margin:40px 30px; width:300px; background:#fff; padding:50px 30px; min-height:600px;}
.copy-res ul li{ margin:10px 0; background:#00AAEE; color:#fff;}
$('#mainUl').children("li").on('click',function(){
    //console.log("000");
    var clone = $(this).clone();
     
    //console.log(clone);
     
    //$(clone).clone().appendTo("#showUl"); 
    clone.append("<span style='color:#fff;padding:0 10px;float: right;'>X</span>").find("span").click(function(){
        console.log("1234");
        $(this).parent().remove("li");
    });
    $("#showUl").append(clone); 
     
});

 

发布时间:2022/10/13

发表评论