JavaScript增加节点和删除DOM节点

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