js 动态添加删除demo

最近做了个需求，如下图

 

 

 点击加号可以添加一项，点击减号删除这项，实现起来相对来说简单

html代码：

                         <div class="mui-input-row otherbankName">
                            <label style="font-size: 13px">其他银行卡开户行</label>
                            <input type="text" class="otherbankNameinput" placeholder="填写其他银行卡开户行">
                            <div class="img">
                                <img class="triangleaddicon" src="../image/addicon.png" alt="">
                            </div>
                        </div>
                        <div class="mui-input-row otherbankNum">
                            <label style="font-size: 13px">其他银行卡账号</label>
                            <input type="text" class="otherbankNuminput" placeholder="填写其他银行卡账号">
                            <div class="img">
                                <img class="triangleaddicon" src="../image/addicon.png" alt="">
                            </div>
                        </div>

js代码：当点击的时候在页面创建一个div并且插入在加号div的下面，

function addbanknum (){
    var timestamp = parseInt((new Date()).valueOf());
    var div = document.createElement("div");
    div.className = "mui-input-row otherbankNum";
    div.id = "otherbankNum"+ timestamp;
    div.innerHTML = `
    <label style="font-size: 13px">其他银行卡账号</label>
    <input type="text" class="otherbankNuminput" placeholder="填写其他银行卡账号">
    <div class="img" id="triangleminusicon${timestamp}" onclick="delefun1(${timestamp})">
         <img class="triangleminusicon" src='../image/minus.png' alt="">
    </div>
    `
    var otherbankNum = document.querySelector('.otherbankNum')
    document.getElementById("baseinfocontent").insertBefore(div,otherbankNum.nextSibling);
}
//添加银行卡账号
mui(".otherbankNum .img")[0].addEventListener('tap', function () {
    addbanknum ()
})

function addbankname () {
    var timestamp = parseInt((new Date()).valueOf());
    var div = document.createElement("div");
    div.className = "mui-input-row otherbankName";
    div.id = "otherbankName" + timestamp;
    div.innerHTML = `
    <label style="font-size: 13px">其他银行卡开户行</label>
    <input type="text" class="otherbankNameinput" placeholder="填写其他银行卡开户行">
    <div class="img" id="triangleminusicon${timestamp}" onclick="delefun2(${timestamp})">
         <img class="triangleminusicon"  src='../image/minus.png' alt="">
    </div>
    `
    var otherbankName = document.querySelector('.otherbankName')
    document.getElementById("baseinfocontent").insertBefore(div,otherbankName.nextSibling);
}
//添加银行卡开户行
mui(".otherbankName .img")[0].addEventListener('tap', function () {
    addbankname ()
})

//银行信息删除
functio delefun1(deldeidnum) {
    document.getElementById("otherbankNum" + deldeidnum).remove();
}
function delefun2(deldeidnum) {
    document.getElementById("otherbankName" + deldeidnum).remove();
}

传值：最重要的是要获取到动态添加的div，通过 document.getElementsByClassName这个方法获取到相关的input元素，返回的是一个数组，然后遍历数组获取值

//银行卡开户行信息
var bankNameinputvalueArr = []
function bankNameinputvalue() {
    var inputval = document.getElementsByClassName('otherbankNameinput')
    console.log(inputval)
    for (var i = 0; i < inputval.length; i++) {
        var bankNameinputvalue = {
            id: '',
            value:''
        }
        console.log(inputval[i]);
        console.log(inputval[i].value);
        if (inputval[i].value) {
            bankNameinputvalue.id = i
            bankNameinputvalue.value = inputval[i].value
        }
        bankNameinputvalueArr.push(bankNameinputvalue)
    }
    console.log(bankNameinputvalueArr)
}
//银行卡账号
var bankNuminputvalueArr = []
function bankNuminputvalue() {
    var inputval = document.getElementsByClassName('otherbankNuminput')
    console.log(inputval)
    for (var i = 0; i < inputval.length; i++) {
        var bankNuminputvalue = {
            id: '',
            value:''
        }
        console.log(inputval[i]);
        console.log(inputval[i].value);
        if (inputval[i].value) {
            bankNuminputvalue.id = i
            bankNuminputvalue.value = inputval[i].value
        }
        bankNuminputvalueArr.push(bankNuminputvalue)
    }
    console.log(bankNuminputvalueArr)
}

根据缓存值在页面生成div，并将值显示在input框，通过 document.querySelectorAll 获取生成的所有input，然后循环遍历把值显示在对应的input框。

if(personalbaInfo.bankNameinputvalueArr){
            for(var i = 0; i< personalbaInfo.bankNameinputvalueArr.length-1; i++){
                addbankname()
            }
            for(var j = 0; j < personalbaInfo.bankNameinputvalueArr.length; j++) {
                document.querySelectorAll('.otherbankName input')[j].value = personalbaInfo.bankNameinputvalueArr[j].value
            }
        }
        if(personalbaInfo.bankNuminputvalueArr){
            for(var i = 0; i< personalbaInfo.bankNuminputvalueArr.length-1; i++){
                addbanknum()
            }
            for(var j = 0; j < personalbaInfo.bankNuminputvalueArr.length; j++) {
                document.querySelectorAll('.otherbankNum input')[j].value = personalbaInfo.bankNuminputvalueArr[j].value
            }
        }

 

标签：otherbankNum,demo,value,js,inputval,添加,var,div,document
来源： https://www.cnblogs.com/lyt0207/p/12357612.html