jQuery动态添加input框

bootstrap和jQuery实现

1. 实现效果如下：

 点击加号进行添加，点击减号删除行，鄙人前端技术不太好，头铁写的

HTML代码如下：

<div id="index-div">
    
</div>

HTML代码其实就是个div盒子，也可以给一个初始化的文本框

重头是js的代码：

进入页面：

$(function () {
        var html = "";
        html += '<div class="form-group">';
        html += '<label class="col-md-2 control-label">硬件信息';
        html += '</label>';
        html += '<div class="col-sm-3 col-md-3 col-xs-3">';
        html += '<select class="form-control input-sm">';
        html += '<option value="" selected>请选择硬件类型</option>';
        html += '<option value="1">网卡</option>';
        html += '<option value="2">摄像头</option>';
        html += '</select>';
        html += '</div>';
        html += '<div class="col-sm-5 col-md-5 col-xs-5">';
        html += '<input type="text" name="hardSerialNum" readonly="readonly" placeholder="请填硬件编号"/>';
        html += '</div>';
        html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
//加号
        html += '<a href="javascript:;" class="addInputReturn" >';
        html += '<span class="glyphicon glyphicon-plus"></span>';
        html += '</a>';

        html += '</div>';
        html += '</div>';

        $("#index-div").append(html);
})

效果如下：

点击加号事件，用on绑定，body做为顶级父节点，这里用append进行追加，用html添加无效的：

/**
 * 动态添加事件
 */
$("body").on('click','.addInputReturn',function () {

    //添加减号
    var $content = "";
    $content += '<a href="javascript:;" class="delInput" >';
    $content += '<span class="glyphicon glyphicon-minus"></span>';
    $content += '</a>';
    $(this).parent().append($content);

    //去除加号
    this.remove();

    var html = "";
    html += '<div class="form-group">';
    html += '<label class="col-md-2 control-label">硬件信息';
    html += '</label>';
    html += '<div class="col-sm-3 col-md-3 col-xs-3">';
    html += '<select class="form-control input-sm flagHrad hardName" style="color: #555" name="hardName">';
    html += '<option value="" selected>请选择硬件类型</option>';
    html += '<option value="1">网卡</option>';
    html += '<option value="2">摄像头</option>';
    html += '</select>';
    html += '</div>';
    html += '<div class="col-sm-5 col-md-5 col-xs-5">';
    html += '<input type="text" name="hardSerialNum" readonly="readonly" style="color: #555" class="form-control input-sm hardSerialNum" placeholder="请填硬件编号"/>';
    html += '</div>';
    html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
    html += '<a href="javascript:;" class="addInputReturn" >';
    html += '<span class="glyphicon glyphicon-plus"></span>';
    html += '</a>';
    html += '</div>';
    html += '</div>';

    $("#index-div").append(html);
})

效果： 

减号点击事件：

/**
 * 删除事件
 */
$("body").on('click','.delInput',function () {
    //获取当前点击的元素的父级的父级进行删除
    $(this).parent().parent().remove();
})

 这样就ojbk了