js实现选择标签，删除标签，去重校验

先看下实现效果：

原始页面如下：单击城市，则添加至上边标签，双击标签则从上边标签库删除

单击选择“北京”，“上海”，“杭州”，“南京”，则添加至标签库，重复选择北京，则弹框不再添加

点击全部清除，则全部从标签库删除

代码如下：

<html>
<!--Created by Hanjun on 2020-07-10.-->
<head>
    <style>
        .el-tag {
            background-color: #ecf5ff;
            display: inline-block;
            height: 32px;
            padding: 0 10px;
            line-height: 30px;
            font-size: 12px;
            color: #409eff;
            border: 1px solid #d9ecff;
            border-radius: 4px;
            box-sizing: border-box;
            white-space: nowrap;
            margin: 10px;

        }
        ul li{
            width: 50px;
            background-color: #409eff;
            margin-bottom: 10px;
        }
    </style>
    <meta charset="utf-8" />
    <title>标签事件测试</title>
</head>
<body>
<div>
    <p>双击标签，单个删除</p>
    <div id="citys">
    </div>
    <input type="button" name="submitButton" value="全部清除" onclick="removeAll()" />
    <ul>
        <p>单击下面的地点，添加标签</p>
        <li onclick="addCity('北京')">北京</li>
        <li onclick="addCity('上海')">上海</li>
        <li onclick="addCity('杭州')">杭州</li>
        <li onclick="addCity('南京')">南京</li>
        <li onclick="addCity('苏州')">苏州</li>
        <li onclick="addCity('武汉')">武汉</li>
    </ul>
</div>
<script type="text/javascript">
    var cityDiv = document.getElementById("citys");
    function addCity(city){
        var oldCitys=document.getElementsByClassName("el-tag");
        for(var i = 0;i < oldCitys.length; i++){
            if(oldCitys[i].innerText==city){
                alert("请勿重复选择");
                return ;
            }
        }
        var newDiv = document.createElement("div");
        var newText = document.createTextNode(city);
        newDiv.setAttribute("class","el-tag");
        newDiv.appendChild(newText);
        cityDiv.appendChild(newDiv);
        newDiv.setAttribute("ondblclick","dele(this)");
    }
    function removeAll(){
        var childDiv = cityDiv.childNodes;
        console.log(childDiv);
        for(var i=childDiv.length-1; i>=0;i--){
            cityDiv.removeChild(childDiv[i])
        }

    }
    function dele(obj){
        cityDiv.removeChild(obj);
    }
</script>
</body>
</html>

js实现选择标签，删除标签，去重校验

猜你喜欢