效果图(点新增,input框增加):
html代码:
<div class="content" id="factoryName" style="width:35%">
<div style="width:100%;display: inline-block; margin-right: 30px;">
<input style="width: 80%;margin-bottom: 10px;margin-right: 10px;" class="num_test require" type="text" name='real_test_factory_name[]'><button class="addInput">新增</button>
</div>
</div>
js代码:
$(".addInput").on("click", function() {
var div = document.createElement("div");
div.style = 'width:100%;display: inline-block; margin-right: 30px;';
// input和button元素是div的子元素
var input = document.createElement("input");
input.type = "text";
input.name = "real_test_factory_name[]"
input.className = 'num_test require';
input.style = 'width: 80%;margin-bottom: 10px;margin-right: 10px;';
var button = document.createElement("button");
button.className = 'removeInput';
button.innerHTML = '删除';
// input和button添加到div
div.appendChild(input);
div.appendChild(button)
// 创建的div添加到最外层div上
document.getElementById("factoryName").appendChild(div);
});
// 动态添加的div,需要使用这种方式进行删除
// 删除点击的当前行
$("#factoryName").on("click", ".removeInput", function(e) {
// e -> 当前点击的删除按钮(removeInput)
var tar = e.target.parentNode;
tar.parentNode.removeChild(tar)
})