jQuery动态添加input框

bootstrap和jQuery实现

1. 实现效果如下：

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

HTML代码如下：

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

重头是js的代码：

进入页面：

$(function () {
        var html = "";
        html += '
';
        html += '硬件信息';
        html += '';
        html += '
';
        html += '';
        html += '请选择硬件类型';
        html += '网卡';
        html += '摄像头';
        html += '';
        html += '
';
        html += '
';
        html += '';
        html += '
';
        html += '
';
//加号
        html += '';
        html += '';
        html += '';

        html += '
';
        html += '
';

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

效果如下：

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

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

    //添加减号
    var $content = "";
    $content += '';
    $content += '';
    $content += '';
    $(this).parent().append($content);

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

    var html = "";
    html += '
';
    html += '硬件信息';
    html += '';
    html += '
';
    html += '';
    html += '请选择硬件类型';
    html += '网卡';
    html += '摄像头';
    html += '';
    html += '
';
    html += '
';
    html += '';
    html += '
';
    html += '
';
    html += '';
    html += '';
    html += '';
    html += '
';
    html += '
';

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

效果： 

减号点击事件：

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

 这样就ojbk了