js通过按钮新增div和删除div

1:html示例

<body>
<div class="container-fluid">
    <form id="addForm" class="form-horizontal">
        <div class="form-group1">
            <button onclick="addTr()" type="button" class="btn btn-info">新增一行</button>
            <button onclick="delTr()" type="button" class="btn btn-info">删除一行</button>
        </div>
        <div class="form-group">
            <label for="userName" class="col-sm-2 control-label">账号</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userName" name="userList[0].userName" placeholder="userName">
            </div>

            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="password" name="userList[0].password" placeholder="password">
            </div>
        </div>
    </form>

</div>
</body>

效果图:

在这里插入图片描述

2:新增

//新增
    var row =1;
    function addTr(){
        var html="<div class=\"form-group\">\n" +
            "            <label for=\"userName\" class=\"col-sm-2 control-label\">账号</label>\n" +
            "            <div class=\"col-sm-4\">\n" +
            "                <input type=\"text\" class=\"form-control\" id=\"userName\" name=\"userList["+row+"].userName\" placeholder=\"userName\">\n" +
            "            </div>\n" +
            "\n" +
            "            <label for=\"password\" class=\"col-sm-2 control-label\">密码</label>\n" +
            "            <div class=\"col-sm-4\">\n" +
            "                <input type=\"text\" class=\"form-control\" id=\"password\" name=\"userList["+row+"].password\" placeholder=\"password\">\n" +
            "            </div>\n" +
            "        </div>";

        $("#addForm").append(html);

        row++;

    }

效果图:

在这里插入图片描述

3:删除

function delTr(){
        var box = document.getElementsByClassName("form-group");
        if(box[1]!=null&&box[1]!=undefined){
            box[1].parentNode.removeChild( box[1]);
        }else{
            alert("就剩一个了还删,你是不是虎?");
        }
    }

效果图:

在这里插入图片描述

————————————————
版权声明：本文为CSDN博主「java-混子里的杠把子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35995940/article/details/100011577

js通过按钮新增div和删除div

猜你喜欢