如何制作简单的 div 框中继器 jquery？

Question

如何使用 jquery 制作简单的 div 框中继器

> <div class="mybox"> <input name="name[]"  /> <input name="number[]" 
> /> <input name="text[]"  /> </div>and  

我有带字段的 div 框，我需要我可以用 + 添加相同的 div 框 喜欢这张照片

Answer 1

您可以创建输入元素的模板并将其添加到父容器。我已经创建了下面的模板。

var content = "<div class='container'><input type='text'/><input type='number' /><input type='text'/><button type='button' id='remove'>-</button></div>";

var content = "<div class='container'><input type='text'/><input type='number' /><input type='text'/><button type='button' id='remove'>-</button></div>";

$(".parent-container").html(content);

$("#add").on("click", function(){
	if($(".parent-container").children().length <5){
  	$(".parent-container").append(content);
  }
  if($(".parent-container").children().length == 5){
  	$("#add").hide();
  }
});

$(".parent-container").on("click", "#remove", function(){
	$(this).parent().remove(); 
  	$("#add").show();
});

.parent-container{
  height:auto;
}

.container{
  border:1px solid lightblue;
  width:180px;
  margin:5px 0;
  position:relative;
}

.container > input {
  display:block;
  margin:5px 0;
}

.container > button {
  position: absolute;
  top: 30px;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-container">

</div>
<button type='button' id='add'>+</button>

测试一下here

更新 1：

最多加 5.. 测试一下here