Как создать блок по клику на кнопку «Добавить»?

Question

[usedtoknow]

Как при нажатии на кнопку, сверху создать такой же блок, что уже есть, а снизу будет все та же кнопка добавления блока и так до бесконечности?

https://jsfiddle.net/y3btkm6c/65/

Comments

[Dymok]

.clone()

Answer 1

[0xD34F]

Скопировать оригинал и по клику копировать копию:

const $block = $('.block_to_add').clone();

$('.click_to_add_block').click(function() {
  $(this).before($block.clone());
});

UPD. Вынесено из комментариев:

А подскажите, как удалить один из блоков по клику на другую кнопку?

Добавить в блок кнопку удаления и обработчик клика:

$(document).on('click', '.delete', function() {
  $(this).parent().remove();
});

<button class="delete">удалить</button>

Comments

[usedtoknow]

Да! В очередной раз спасибо!
А подскажите, как удалить один из блоков по клику на другую кнопку?

[0xD34F]

usedtoknow, дополнил ответ.

[usedtoknow]

0xD34F, да, все как я хотел)) спасибо большое!)

[usedtoknow]

0xD34F, а просто ради интереса. Как бы Вы сделали, чтобы блок с инпутами был не виден вовсе, но при нажатии на "Добавить" появлялся?

[0xD34F]

Можно так:

<div class="add_block">
  <input class="click_to_add_block" type="button" value="Добавить блок">
</div>

$('.click_to_add_block').click(function() {
  $(this).before(`
<div class="block_to_add">
  <div class="topic">
    <input type="text" placeholder="Тема">
  </div>
  <div class="description">
    <textarea placeholder="Текст"></textarea>
  </div>
  <button class="delete">удалить</button>
</div>`);
});

$(document).on('click', '.delete', function() {
  $(this).parent().remove();
});