效果图(点新增,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) })