Динамически обнаруживать скрытые divs

Question

Я искал hi и low для решения этого вопроса, в основном, мне нужна панель со знаком плюса рядом с ней, и когда пользователь нажимает на плюс, пустая версия формы 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 к.

Answer 2

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

Этот клоун формы. Но если вы хотите клонировать div, эта форма включена, замените форму на div.

Edit: исправлена ​​опечатка

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> 

Есть улучшения, которые могут быть сделаны, но это должно держать вас происходит сейчас.