添加span或删除span例子

今天公司项目中遇到这个问题在此给大家分享一下：
1.Css部分
<style type="text/css">
        #bqzhi b{border:1px solid #EAD483;font-weight:normal;margin:3px; background-color:#FEF6CE; cursor:pointer; padding:5px 5px 3px 5px;height:auto;overflow:hidden;}
        #ysbq{ clear:both;border:1px solid #b8dcea;height:auto;overflow:hidden;531px;}
        #yushebq{padding:5px 10px 5px 10px;}
       .yushebq1{font-weight:normal;margin:3px; background-color:#e1ecf4;color:#518ca8; cursor:pointer; padding:5px 5px 3px 5px;height:auto;overflow:hidden;}
        .yushebq2{font-weight:normal;margin:3px; background-color:#EAD483;color:#000; padding:5px 5px 3px 5px;height:auto;overflow:hidden;}
    </style>
2.脚本部分
<script> 
 function tieshang() {
            var txtbq = $.trim($("#bqian").val());
            if (txtbq.length != 0) {
                var a = false;
                $("#bqzhi b").each(function () {
                    if ($(this).html() == txtbq) {
                        a = true;
                        return;
                    }
                })
                if (!a) {
                    $("#bqzhi").append('<b>' + txtbq + '</b>');
                    bindListener();
                    updatehidden();
                }

            }
        }
        $(function () {
            $("#yushebq b").click(function () {
                //var yushe = $(this).text();
                if (!$(this).hasClass("yushebq2")) {
                    // 为新元素节点添加事件侦听器
                    $("#bqzhi").append('<b>' + $(this).html() + '</b>');
                    bindListener();
                    updatehidden();
                }
                $(this).removeClass("yushebq1").addClass("yushebq2");
            });
        })
        $(document).ready(function () {
            bindListener();
        })
        // 用来绑定事件(使用unbind避免重复绑定)
        function bindListener() {
            $("#bqzhi b").unbind().click(function () {
                $(this).remove();
                updatehidden();
                var result = $(this).html();
                $("#yushebq b").each(function () {
                    if ($(this).html() == result) {
                        $(this).removeClass("yushebq2").addClass("yushebq1");
                    }
                })
            })
        }
        function updatehidden() {
            var toid = "";
            $("#bqzhi b").each(function () {
                toid += $(this).html() + ",";
            });
            toid = toid.substring(0, toid.lastIndexOf(","));
            $("#Toid").val(toid);
        }
    </script>
3.页面html部分

<ul class="clr" style="height: auto; overflow: hidden;">
<li class="spL">标签：</li>
<li style=" 533px; margin-top: 6px;height: auto; overflow: hidden;">
<div id="bqzhi"></div>
<div id="tjbqid"style="clear:both;70px;height:26px;margin:3px 3px 6px 3px;cursor:pointer;">
<img alt="" onclick="tjbq()" src="/xh/images/tjbqs.jpg" /></div>
<div id="ysbq" style="display:none; margin:3px 0px 6px 0px;">
<div style="background:url(/xh/images/bqbj.jpg) no-repeat; 531px;height:43px;">
<ul style="border:0px;">
<li style="height:23px;235px;margin-left:12px;_margin-left:6px;color:Black;font-size:15px;font-weight:bold;padding-top:20px;text-align:center;">添加鲜花的标签</li>
<li style="height:30px;176px;padding:13px 0px 0px 10px;">
<input style="172px;" type="text" id="bqian" name="bqian" />
</li>
<li style="height:30px;55px;margin-left:10px;padding-top:13px"">
<img alt=""style="cursor:pointer;" src="/xh/images/tieshang.jpg" onclick="tieshang()"/>
</li><li style="height:43px;20px;margin-left:10px;">
<img alt="" onclick="guanbi()" style="cursor:pointer;" src="/xh/images/guanbi.jpg" />
</li></ul></div>
<div id="yushebq"><b class="yushebq1">预设标签5</b>
<b class="yushebq1">预设标签1</b>
<b class="yushebq1">预设标签2</b>
<b class="yushebq1">预设标签3</b>
<b class="yushebq1">预设标签6</b>
<b class="yushebq1">预设标签7</b>
<b class="yushebq1">预设标签4</b>
</div></div></li></ul>
html部分发布之后可能样式比较难看，能看懂个意思就行了