做个标签特效

 .tags { 
 background-color: #fff; 
 border: 1px solid #d5d5d5; 
 color: #777; 
 padding: 4px 6px; 
 margin:40px auto; 
 } 
 
 .tags .tag { 
 background-color: #91b8d0;
 color: #fff; 
 display: inline-block;
 font-size: 12px; 
 font-weight: normal;
 margin-bottom: 3px; 
 margin-right: 3px;
 padding: 4px 22px 5px 9px; 
 position: relative; 
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); 
 transition: all 0.2s ease 0s; 
 vertical-align: baseline; 
 white-space: nowrap; 
 } 
 
 .tags .tag .close { 
 bottom: 0; 
 color: #fff; 
 float: none; 
 font-size: 12px; 
 line-height: 20px; 
 opacity: 1; 
 position: absolute; 
 right: 0; 
 text-align: center; 
 text-shadow: none; 
 top: 0; 
 width: 18px; 
 }
 
<div class="col-sm-10">
    <p class="tags" id="tags"></p>
    <input type="hidden" class="form-control" name="cate_ids1" value="" id="cate_ids1">
</div>


function del_cat(e){
        var del_cat_id = $(e).attr('cat_id');
        var cate_ids = $("#cate_ids1").val();
        var is_add = $(e).parent('.tag').parent().attr('is_add');
        
        if(','+del_cat_id+',' == cate_ids){
            layer.msg('不能为空~');return false;
        }
        var cat_ids_replace = cate_ids.replace(','+del_cat_id+',',',');
        //console.log(cat_ids_replace);
        $(e).parent('.tag').remove();
        $("#add_cate_ids").val(cat_ids_replace);
        
    }