jQuery实现多条件筛选出来的时候删除不了？

Question

jQuery实现多条件筛选出来的时候删除不了？

发布于
2015-11-01

更新于
2015-11-01

$(document).ready(function(){

    $("#select1 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectA").remove();
        } else {
            var copyThisA = $(this).clone();
            if ($("#selectA").length > 0) {
                $("#selectA a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisA.attr("id", "selectA"));
            }
        }
    });

    $("#select2 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectB").remove();
        } else {
            var copyThisB = $(this).clone();
            if ($("#selectB").length > 0) {
                $("#selectB a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisB.attr("id", "selectB"));
            }
        }
    });

    $("#select3 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectC").remove();
        } else {
            var copyThisC = $(this).clone();
            if ($("#selectC").length > 0) {
                $("#selectC a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisC.attr("id", "selectC"));
            }
        }
    });

    $("#select4 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectD").remove();
        } else {
            var copyThisC = $(this).clone();
            if ($("#selectD").length > 0) {
                $("#selectD a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisC.attr("id", "selectD"));
            }
        }
    });

    $("#selectA").on("click", function () {
        $(this).remove();
        $("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
    });

    $("#selectB").on("click", function () {
        $(this).remove();
        $("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
    });

    $("#selectC").on("click", function () {
        $(this).remove();
        $("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
    });

    $("#selectD").on("click", function () {
        $(this).remove();
        $("#select4 .select-all").addClass("selected").siblings().removeClass("selected");
    });


    $(".filter_result li").on("click", function () {
        if ($(".filter_result").length > 1) {
            $(".select-no").hide();
        } else {
            $(".select-no").show();
        }
    });

});

<div class="search_filter">
                        <div class="filter_con">
                            <div class="filter_conc_tit">品牌:</div>
                            <ul class="filter_right" id="select1">
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">HSTYLE/韩都衣舍</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">服装款式细节:</div>
                            <ul class="filter_right" id="select2">
                                <li><a href="javascript:;">拼接</a></li>
                                <li><a href="javascript:;">拉链</a></li>
                                <li><a href="javascript:;">印花</a></li>
                                <li><a href="javascript:;">蕾丝</a></li>
                                <li><a href="javascript:;">褶皱</a></li>
                                <li><a href="javascript:;">蝴蝶结</a></li>
                                <li><a href="javascript:;">抽褶</a></li>
                                <li><a href="javascript:;">立体装饰</a></li>
                                <li><a href="#">纽扣</a></li>
                                <li><a href="#">绣花 </a></li>
                                <li><a href="#">口袋</a></li>
                                <li><a href="#">系带</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">选购热点:</div>
                            <ul class="filter_right" id="select3">
                                <li><a href="#">田园小清新</a></li>
                                <li><a href="#">加肥加大</a></li>
                                <li><a href="#">包臀</a></li>
                                <li><a href="#">拼接撞色</a></li>
                                <li><a href="#">名媛小香风</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">价格:</div>
                            <ul class="filter_right" id="select4">
                                <li><a href="#">0-99元</a></li>
                                <li><a href="#">100-299元</a></li>
                                <li><a href="#">300-499元 </a></li>
                                <li><a href="#">500-999元</a></li>
                                <li><a href="#">1000元以上</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">已选条件:</div>
                            <ul class="filter_result">
                                <li class="select-no" style="display: block;">暂时没有选择过滤条件</li>
                            </ul>
                        </div>
                    </div>

以上jq是我从http://www.helloweba.com/demo/fselect/#抄的。
但是发现live 在1.7以上不再支持了。所以我把live换成on绑定事件。
但是有两个问题：
1、问题暂时没有选择过滤条件居然没有隐藏？？
2、在已选条件按钮中想删除。都删除不了。不应该啊。上面已经写了remove()。为什么按钮这块没移走？
难道是on跟live写法不一样？
图片描述