爱好标签选择

HTML部分

<div>
                <label for="addAlias">{{i18n $.root.Lang "course.alias"}}</label>
                <div class="input-group">
                   <input type="text" class="form-control" name="addAlias" id="addAlias">
                   <div class="input-group-btn">
                        <button type="button" id="addAlias-btn" class="btn btn-default-bg addAlias">{{i18n $.root.Lang "course.add"}}</button>
                    </div> 
                </div>
                <div class="showAlias">                   
                </div>
            </div>

JS部分

 let addAlias = $('#addAlias'),
addBtn = $('#addAlias-btn'),
showAlias = $('.showAlias'),
aliasArr = [];

  addBtn.on('click', function () {
let value = addAlias.val(),
    ele = document.createElement('span'),
    textNode = document.createTextNode(value),
    elede = document.createElement('span'),
    detag = document.createElement('span');
$(ele).addClass('alias');
$(detag).addClass('deTag');
$(elede).addClass('deleteAlias');
elede.appendChild(detag);
ele.appendChild(elede);
ele.appendChild(textNode);
showAlias.append($(ele));
aliasArr.push(value);
$(elede).on('click', function () {
    ele.remove();
    aliasArr.pop();
})
})

CSS部分

.showAlias {
padding: 10px 0px;
.alias {
    display: inline-block;
    position: relative;
    padding: 5px 8px;
    margin: 5px 10px;
    background: rgb(179, 194, 190);
    border-radius: 15px;
    cursor: pointer;
    .deleteAlias {
        display: inline-block;
        position: absolute;
        top: -5px;
        right:-5px;
    }
    &:hover {
        .deleteAlias {
            display: inline-block;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: #666;
            border: 1px solid #eee;
            .deTag {
                border-bottom: 2px solid #ddd;
                height: 0px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                width: 70%;
            }
        }
    }
}
}

效果图

企业微信截图_20180502172747.png 企业微信截图_20180502172903.png
本人原创，转载请附上原文链接 https://www.jianshu.com/p/02acea4140d9