<script type="text/javascript">
        $(function(){
            $('.div li').click(function(){
                var html = '';
                var text = $(this).text();
                var shu = $(".div li.active").length;
                if(!$(this).hasClass('active')){
                    $(this).addClass('active');    
                    if($('.div li.active').length > 10){
                        alert('目的地最多支持10个');
                        $(this).removeClass('active');
                    }
else
{
                    html += '<a href="javascript:;">'+text+'</a>'
                    $('.div1').append(html);
$('.div1 a').click(function(){
 $str=$(this).text();
   $(this).remove();
  
    //$('.div').eq(index).removeClass("active");
 $('.div').children("ul").children("li").each(function(){
   if($(this).text()==$str)
{
$(this).removeClass("active");
}
 });
 

});
}
                }else{
                    $(this).removeClass('active');
                }
            });
           
        });
    </script>
ff和ie 都测试了你说的效果我都做出了 希望满意.你原先的代码问题主要是获取div1的a连接添加点击事件 不应该方在外面写 。。应该放在 你追加好这个a连接后添加 要不然找不到目标的

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    li{
    list-style: none;
    }
    .div,.div1{
    width: 400px;
    margin: 0 auto;
    }
    .div li{
    width: 100px;
    height: 35px;
    border:1px solid #DCDCDC;
    line-height: 35px;
    text-align: center;
    display:inline-block;
    cursor: pointer;
    }
    .div li.active{
    background: #00BCF3;
    color: #FFF;
    }
    .div1 a{
        background: #00BCF3;
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        margin: 0 5px 5px 0;
        padding: 0 10px 0 10px;
        position: relative;
    }
    </style>
    <script type="text/javascript">
    $(function(){
    $('.div li').on('click',function(){
    var _class = $(this).attr('data-id');
    if(!$(this).hasClass('active')){
    if($('.div li.active').length >= 10){
    alert('目的地最多支持10个');
                     return false;
    }else{
    $(this).addClass('active');
    var _html = $(this).text();
                     $('.div1').append('<a href="javascript:void(0)" data="' + _class + '">' + _html + '</a>');
    }

    }else{
    $(this).removeClass('active');
    $('.div1 a').each(function(){
    if($(this).attr('data') == _class){
    $(this).remove();
    }
    });
    }
    });
    $('.div1 a').live('click',function(){
    var _class = $(this).attr('data');         $('.div li').each(function() {
            
                if ($(this).attr('data-id') == _class) {
                    $(this).removeClass('active');
                }
            })
            $(this).remove();
    });
    });
    </script>
    </head>
    <body>
    <div class="div">
    <ul>
    <li data-id="1">厦门</li>
    <li data-id="2">香港</li>
    <li data-id="3">北京</li>
    <li data-id="4">天津</li>
    <li data-id="5">澳门</li>
    <li data-id="6">广州</li>
    <li data-id="7">杭州</li>
    <li data-id="8">南京</li>
    <li data-id="9">西安</li>
    <li data-id="10">大连</li>
    <li data-id="11">三亚</li>
    <li data-id="12">重庆</li>
    </ul>
    </div>
    <div class="div1" style="margin-top:20px;">

    </div>
    <div class="div1" style="margin-top:20px;">

    </div>
    </body>
    </html>请问下 我这里创建的a标签 放到了 相同的class="div1"里面  怎么样才能我点击其中的一个class="div1" 里面a标签remove 把其他class="div1"里面对应的a标签删除