jQuery动态添加文本框

在制作一些表单的时候，要考虑到客户的信息多样性，比如电话号码。下面是一个动态生成电话号码框的案例，点击新增添加一个电话号码的输入框，并且可以点击删除去掉多余的输入框。下面是一个使用bootstrap制作的案例。

使用方法

在html中引入js和css

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>

HTML结构

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h4 class="mb-3">注册模板</h4>
            <form class="needs-validation" novalidate>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="firstName">姓名</label>
                        <input type="text" class="form-control" id="firstName" placeholder="请输入姓名" value="" required>
                        <div class="invalid-feedback">
                            姓名是必填字段！
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="email">邮箱 <span class="text-muted">(可选)</span></label>
                    <input type="email" class="form-control" id="email" placeholder="you@example.com">
                    <div class="invalid-feedback">
                        请输入邮箱以便我们联系到您！
                    </div>
                </div>

                <div class="mb-3">
                    <label for="address">居住地址</label>
                    <input type="text" class="form-control" id="address" placeholder="" required>
                    <div class="invalid-feedback">
                        居住地址是必填字段！
                    </div>
                </div>

                <div class="mb-3 firstPhone">
                    <label for="phone">联系电话</label>
                    <label for="phone"><button class="btn btn-outline-secondary addPhone" type="button" onclick="addPhone()">新增</button></label>
                    <input type="text" class="form-control" id="phone" placeholder="" required>
                    <div class="invalid-feedback">
                        联系电话是必填字段！
                    </div>
                </div>

                <div class="mb-3">
                    <label for="sex">性别</label>
                    <div class="custom-control custom-radio">
                        <input id="sex" name="sex" type="radio" class="custom-control-input" value="x" checked required>
                        <label class="custom-control-label" for="sex">男</label>
                    </div>
                    <div class="custom-control custom-radio">
                        <input id="sex2" name="sex" type="radio" class="custom-control-input" value="y" required>
                        <label class="custom-control-label" for="sex2">女</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <label>兴趣爱好 <span class="text-muted">(可选)</span></label></label>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="yy" value="yy">
                            <label class="custom-control-label" for="yy">游泳</label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="ds">
                            <label class="custom-control-label" for="ds">登山</label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="run">
                            <label class="custom-control-label" for="run">跑步</label>
                        </div>
                    </div>
                </div>
                <hr class="mb-4">
                <button class="btn btn-primary btn-lg btn-block" type="submit">注册</button>
            </form>
        </div>
    </div>
</div>

JavaScript代码

    function addPhone(e) {
        let id =  "phone"+$(".phone").length;
        $(".firstPhone").after("<div class=\"mb-3 phone\" id=\""+id+"\" >\n" +
            "                    <label for=\"phone1\">联系电话"+$(".phone").length+"</label>\n" +
            "                    <div class=\"input-group is-invalid\">\n" +
            "                        <input type=\"text\" class=\"form-control\" id=\""+id+"\" placeholder=\"\">\n" +
            "                        <div class=\"input-group-append\">\n" +
            "                            <button class=\"btn btn-outline-secondary\" type=\"button\" onclick='deletePhone(\""+id+"\")'>删除</button>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                </div>")
    }

    function deletePhone(id){
        let id1 = "#"+id
        $(id1).remove();
    }

以上就是一个jQuery动态添加文本框的案例，希望对你有帮助。