<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连接后添加 要不然找不到目标的
$(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连接后添加 要不然找不到目标的
<!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标签删除