隠されたdivを動的に表示

Question

これについての解決策は基本的には高低を検索しましたが、基本的にはその横にプラス記号が付いたパネルがあり、ユーザーがプラス記号をクリックするとフォーム1の空白のバージョンが新しい+記号をクリックした後に公開されるパネル：

________________________________
|        フォーム1         |
|                                       |
|                                       |
__________________________________                                        （+）

|        フォーム2         |
|                                       |
|                                       |                                        （+）（ - ）

また、再びパネルを削除するには、マイナス記号を持っていると便利だろう。

誰かがそのようなことを知っているのですか、誰かが正しい方向に私を向けることができますか？

ありがとうございます。

Answer 1

はあなたが何ができるか

<div id="wrap"> 
    <div class="duplicate"> 
     something 
     <span class="plus">+</span> 
    </div> 
</div> 

を持っていると仮定しますタイプミスを修正している。

 
$('span.plus').click(function() { 
    new = $(this).parent().clone().appendTo('#wrap'); 
    $('<span class="minus">-</span>').insertAfter(new.children('span')) 
     .click(function() { 
      $(this).parent().remove(); 
     }); 

}); 

もちろんテストされていない...;）

編集：くそー...あなたはjQueryを使っていると思っていました...しかし、これは他のJavascriptフレームワークと同様に動作するはずですk。

Answer 2

function cloneForm() { 
    var form1 = document.getElementById('form1'); 
    var form2 = form1.cloneNode(true); 
    document.insertBefore(form2, form1.nextSibling); 
} 

この1つはフォームをクローンします。しかし、フォームがオンになっているdivをクローンしたい場合は、 'form'を 'div'に置き換えてください。

編集：

Answer 3

フォームが追加/削除されるときに移動するのではなく、フォームの下に+と - のリンクを付ける方が簡単かもしれません。ここにJSだ：

var forms = 1; 

function add() { 
    var form1 = document.getElementById('form1'); 
    var newForm = form1.cloneNode(true); 
    newForm.id = 'form' + ++forms; 
    document.getElementById('forms').appendChild(newForm); 
} 

function subtract() { 
    if (forms > 1) { 
     document.getElementById('forms') 
     .removeChild(document.getElementById('form' + forms--)); 
    } 
} 

、ここでHTMLスニペットです：

<div id="forms"> 
    <div id="form1"> 
     something 
    </div> 
</div> 

<p><a href="javascript:add()">+</a> <a href="javascript:subtract()">&minus;</a></p> 

あり作ることができるの改善がありますが、これは今のために行くあなたを保つ必要があります。