（layui）点击加号添加电话输入框，点击减号，电话输入框删除

点击加号会增加子电话输入框，点击子电话输入框后的减号，输入框消失。效果如图所示：

代码如下：

引入外部的js文件：

<script th:src="@{/customers/customerUpdate.js}" type="text/javascript" charset="utf-8"></script>

HTML页面：

<div class="layui-form-item">
    <label class="layui-form-label required">电话号码</label>
    <div class="layui-input-inline">
        <input type="text" name="telephone"  autocomplete="off" class="layui-input">
    </div>
    <span id="addPhone"><i class="layui-icon layui-icon-addition" style="font-size: 30px; color: blue;cursor:pointer"></i></span>
</div>
<!--用来存放子电话的dom元素-->
<div id="telephones"></div>

JS文件：customerUpdate.js
//点击加号绑定的事件
$("#addPhone").click(function(){
    var addPhone = "";
    addPhone+="<div class=\"layui-form-item\" style=\"padding-top:3px\">\n" ;
    addPhone+="<label class=\"layui-form-label\">子电话</label>\n";
    addPhone+="<div class=\"layui-input-inline\">\n";
//校验电话号码的失焦事件
    addPhone+="<input οnblur=\"checkPhone()\" type=\"text\" name=\"subTelephone\"  class=\"layui-input\">\n";
    addPhone+="</div>\n";
   //点击减号绑定的事件
    addPhone+="<span οnclick='this.parentElement.remove()'><i class=\"layui-icon layui-icon-subtraction\" style=\"font-size: 30px; color: blue;cursor:pointer;\"></i></span>";
    addPhone+="<span id='error'></span>";
    addPhone+="</div>";
 //追加电话号码
    $("#telephones").append(addPhone);
});

//电话号码校验方法
    function checkPhone(){
    var set = new Set();
    var telephone = $('input[name="telephone"]').val();
    set.add(telephone);

   //通常获取的是表单标签name
    var subTelephone=  document.getElementsByName("subTelephone");
    for(var i=0;i<subTelephone.length;i++) {
    var subTel = subTelephone[i].value;
    if (subTel.length == 0) {
    layer.msg('手机号码不能为空！', { icon: 2, time: 3000 });
    return false;
}
    if (subTel.length != 11) {
    layer.msg('请输入有效的手机号码，需是11位！', { icon: 2, time: 3000 });
    return false;
}
    var myreg = /^(((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(16[6])|(17[0135678])|(18[0-9])|(19[89]))\d{8})$/;
    if (!myreg.test(subTel)) {
    // alert('请输入有效的手机号码！');
    layer.msg('请输入有效的手机号码!', { icon: 2, time: 3000 });
    return false;
}
    if (set.has(subTel)) {
    layer.msg('该电话已存在!', { icon: 2, time: 3000 });
    subTel = "";
    return false;
}else{
    set.add(subTel);
}
}
}