如何移除相对应的内容！

怎么移除相对应的内容！！！



<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin: 0; padding: 0;}

        li{list-style: none;}

        .div{width: 280px; margin: 50px auto;}

        .box_head li{width: 50px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}

        .box_head li.on{background: #e74303;}

        .box,.menu,.box1{margin-top: 10px; float: left; width: 260px;}

        .box li,.menu span,.box span{width: 50px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}

        .box ul{display: none;}

        .box li.on{background: #5BCEA1;}

        .btn,.btn1{width: 100px; height: 35px; background: #DA251C; color: #FFFFFF; text-align: center; line-height: 35px; margin-top: 20px; cursor: pointer; float: left;}

        .js_box_2{border: 1px solid #333333;}

    </style>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

</head>

<body>

    <div class="div">

        <div class="box_head">

            <ul>

                <li class="on">内容1</li>

                <li>内容2</li>

                <li>内容3</li>

            </ul>

        </div>

        <div class="box js_box_1">

            <ul style="display:block;">

                <li class="on" data-id = "1">不限</li>

                <li data-id = "2">点击2</li>

                <li data-id = "3">点击3</li>

                <li data-id = "4">点击4</li>

            </ul>

            <ul>

                <li class="on" data-id = "5">不限</li>

                <li data-id = "6">点击6</li>

                <li data-id = "7">点击7</li>

                <li data-id = "8">点击8</li>

            </ul>

            <ul>

                <li class="on" data-id = "9">不限</li>

                <li data-id = "10">点击10</li>

                <li data-id = "11">点击11</li>

                <li data-id = "12">点击12</li>

            </ul>

        </div>

        <div class="box js_box_2"></div>

    </div>

    

</body>

<script>

    $(function(){

        $('.box_head li').on('click',function(){

            var index = $('.box_head li').index($(this));

            $(this).addClass('on').siblings().removeClass('on');

            $('.js_box_1 ul').eq(index).show().siblings().hide();

        });

        $('.js_box_1 li').on('click',function(){

            var dataid = $(this).attr('data-id');

            var html = $(this).html();

            $('.js_box_2').append('<span data-id = '+ dataid +'>'+ html +'</span>');

        });

    });

</script>

</html>

请问下当我把js_box_1里面的内容获取到js_box_2里面当我点击“不限”的时候怎么才能移除js_box_2里面内容对应的ul里面的内容比如我点击“不限1” 只能移除js_box_2里面有点击2 点击3 点击4 其他的不能移除
------解决思路----------------------



    $(function(){

        $('.box_head li').on('click',function(){

            var index = $('.box_head li').index($(this));

            $(this).addClass('on').siblings().removeClass('on');

            $('.js_box_1 ul').eq(index).show().siblings().hide();

        });

        $('.js_box_1 li').on('click',function(){

            var dataid = $(this).attr('data-id');

            var html = $(this).html();

            $('.js_box_2').append('<span data-id = '+ dataid +'>'+ html +'</span>');

            if($(this).hasClass("on")){

	            $('.js_box_2 span').filter(function() {

	            	var t = $(this).attr('data-id') - dataid;

	            	return t > 0 && t <= 3;

	            }).remove();

            }

        });

    });

如何移除相对应的内容！

相关推荐