Как сделать простой повторитель блока div jQuery?

как я могу сделать простой повторитель блока div с помощью jquery

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

У меня есть блок div с полями, мне нужно, чтобы я мог добавить тот же блок div с + как на этой картинке Как сделать простой повторитель блока div jQuery?

Прочтите Как спросить и создайте минимальный воспроизводимый пример

— 03.10.2018 21:45

Ищите jQuery .clone()

— 04.10.2018 01:44

jquery html css

03.10.2018 21:33

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

431

Ответы 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>

Проверить это здесь

Обновление 1:

Сложите до 5 .. Проверить это здесь

Как можно сделать максимум + 5 раз

— 17.10.2018 00:51

я добавляю JavaScript в этот тег скрипта, но он не работает

— 17.10.2018 01:06

Я обновил ответ. Примите его, если вы считаете, что он решает вашу проблему и будет полезен другим.

— 17.10.2018 15:40

03.10.2018 23:31