Html页面 对列表进行选择、取消选择、删除、清空等操作

1、选中的效果图

2、代码部分

        //已选择的电路样式
        $('.selected-box>span').click(function(){
            if($(this).hasClass('active')){
                $(this).removeClass('active')
            }else {
                $(this).addClass('active')
            }
        })
        //删除已选择的电路
        $('#del-span').click(function(){
            $('.selected-box>span').each(function() {
                if ($(this).hasClass('active')) {
                    $(this).remove();
                }
            });
        })
        //清空选择的电路列表
        $('#empty-span').click(function(){
            $('.selected-box>span').remove();
        })