【jQuery】入力フォームをコピーして追加する方法

入力フォーム毎コピーを作成する方法について…

HTML

出力するためのテンプレートと出力するエリアを作成します。

CSS

テンプレート部分は非表示にしておく為に「display:none;」を指定しておきます。

jQuery

結構長ったらしく書いていますが、順に説明すると…

  1. テンプレートからコピーを作成する。
  2. コピーしたデータから非表示用のクラスを削除する。
  3. コピーしたデータのテキストボックスへidを追加する。
  4. コピーしたデータのボタンへクリック時のイベントを追加する。
  5. コピーしたデータのボタンへidを追加する。
  6. 表示用のエリアに追加する。

実際の動作

See the Pen zpVoBx by miko (@miko3) on CodePen.

テキトーに書いたコードなので簡潔かつ綺麗に書けそう…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です