[jQuery].cloneを使って、ボタンを押して同じ要素を追加する！

フォームで入力欄を増やしたい時になど！

シンプルなコード

See the Pen テスト by seaWeblog (@seaWeblog) on CodePen.

ボタンをクリックしたらinputを追加するシンプルなコードです。

変数cloneに、コピーしたい要素を指定し、
inputに入力された値を削除してから、指定の要素内に追加しています。

See the Pen Untitled by seaWeblog (@seaWeblog) on CodePen.

少しHTMLコードとCSSを調整して、削除ボタンも追加しました。

.list__itemが1つの時は削除ボタンが表示されないようにCSSに以下を設定しています。

/* li.list__itemが1つの時に「削除」ボタンを非表示 */
.list__item:only-of-type .delete{
  display:none;
}

増やせる数を3つまでに制限しました。

3つになると追加ボタンを非表示させます。

アイテムタイトルや、アイテム内のinputのnameとidも変更しています。

頻繁に使うものではないので、自分の用のメモがわりに記事にしました。

どなたかの役に立てたら何よりです。