Dynamisch verdeckte versteckte divs

Question

Ich habe hallo und niedrig nach einer Lösung für diese gesucht, grundsätzlich möchte ich ein Panel mit einem Pluszeichen daneben und wenn der Benutzer das Plus klickt, wird die leere Version von Formular 1 in einem neuen repliziert Anzeigefeld, das nach dem Klicken auf das + Zeichen angezeigt wird:

__________________________________
|         Form 1         |
|                                       |
|                                       |                                         (+)

__________________________________
|         Form 2         |
|                                       |
|                                       |                                         (+) (-)

Auch wäre es sehr nützlich sein, das Minuszeichen hat wieder die Platte zu entfernen.

Weiß jemand, der so und Sache oder jemand kann mir in die richtige Richtung weisen.

Danke fürs schauen.

Answer 1

Nehmen wir an, Sie

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

haben, was Sie tun können, ist:

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

}); 

Nicht natürlich getestet ...;)

Edit: Verdammt ... ich nahm Sie jQuery verwenden ... Aber es sollte mit jedem anderen Javascript framewor in ähnlicher Weise arbeiten k.

Answer 2

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

Dieser klont die Form. Aber wenn du das Div klonen willst, das Formular ist, ersetze 'Forms mit' Div '.

Edit: fixiert den Tippfehler

Answer 3

Es könnte einfacher sein, die + zu haben und - Links unterhalb der Formen, anstatt zu bewegen als Formen hinzugefügt/gelöscht werden. Hier ist die 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--)); 
    } 
} 

und hier ist der HTML-Schnipsel:

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

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

Es gibt Verbesserungen, die gemacht werden könnte, aber das sollte Sie jetzt in Gang halten.