关于筛选问题

<!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 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');

					}

					html += '<a href="javascript:;">'+text+'</a>'

					$('.div1').append(html);			

				}else{

					$(this).removeClass('active');

					

				}

			});

			$('.div1 a').live('click',function(){



				$(this).remove();

				var index = $(this).length;

				$('.div').eq(index).removeClass("active");

				alert($('.div').find('li').eq(index))

				alert(index)

			});

		});

	</script>

</head>

<body>

	<div class="div">

		<ul>

			<li>厦门</li>

			<li>香港</li>

			<li>北京</li>

			<li>天津</li>

			<li>澳门</li>

			<li>广州</li>

			<li>杭州</li>

			<li>南京</li>

			<li>西安</li>

			<li>大连</li>

			<li>三亚</li>

			<li>重庆</li>

		</ul>

	</div>

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

		

	</div>

</body>

</html>

请问下 例如当我点击div 里面“厦门”的时候 div1创建了”厦门“ 怎么再次点击div 里面“厦门” 把div1 里面的”厦门“删除 还有就是 点击div1 里面的”厦门“ 把当前的删除 div里面”厦门“ removeclass