js动态添加元素，动态为添加的元素添加可迭代的id

<div id="remoteAppkey" class="form-group col-md-0.5" style="display:block">
    <label class="control-label"></label>
<button class="btn btn-float btn-sm btn-primary dimension-add-dlg" style="display: block" οnclick="addFunc()"><i class="fa fa-plus"></i></button>
</div>

这是“+”按钮的前端实现，按钮操作的实现在下面的代码中

var maxDimension = 6;//最多可添加元素的个数的上限
function addFunc() {
    var num = 0;
    while ($("#dimension"+num+"id").length>0){
        num++;
    }
    if(num>maxDimension){
    }else{
        $("#card-body").append("<div id='newselect"+num+"' class='row'>" +
                "<div id=\"serviceName\" class=\"form-group col-md-2\" style=\"display:block\">" +
                "<select id='dimensionSelect"+num+"id' class='form-control' v-on:change='showMethods' ref='selectedMethod'>" +
                "<option value='' disabled selected>选择维度</option>" +
                "<#list dimensionlist as dimension>"+
                    "<option value='${dimension.dimensionName}' name='${dimension.dimensionName}'>" +
                    "${dimension.dimensionName}" +
                    "</option>" +
                "</#list>" +
                "</select>" +
                "</div>" +
                "<div id='text' class='col-md-6' style='display:block'>" +
                "<div class='controls'>" +
                "<input id='dimension"+num+"id' type='text' class='form-control' value='' />" +
                "</div>" +
                "</div>" +
                "<button class=\"btn btn-float btn-sm btn-primary dimension-remove-dlg \" style=\"display: block\" οnclick='deleFunc("+num+")'><i class=\"fa fa-minus\"></i></button>" +
                "</div>")
    }
}
function deleFunc(param) {
    $("#newselect"+param).remove();
}

上面是两个按钮的实现，分别是增加按钮和删除按钮

点击后面的“+”号按钮可以实现添加元素：

点击“-”号按钮可以实现删除元素。

代码中，while循环的作用是判断准备添加的元素id是否已经存在页面中，每次从0开始循环，如果存在则将id+1，不存在则添加这个id元素，这样也可以方便最后取出页面多个相同模块不同元素的输入值。