Добавить и удалить HTML DIV динамически

Question

У меня проблема с добавлением и удалением html div динамически.Ниже приведен упрощенный код, над которым я работаю:

<input type="button" value="+ Add More Division" name="add_div" id="add_div">

<div id="div_1">
    <input type="button" value="+ Delete Div A" name="del_a" id="del_a">
</div>

<div id="div_2">
    <input type="button" value="+ Delete Div B" name="del_b" id="del_b">
</div>

<div id="div_3">
    <input type="button" value="+ Delete Div C" name="del_c" id="del_c">
</div>

В этой ситуации div_1, div_2 и div_3 можно динамически добавлять и удалять.div_1 всегда будет связан с идентификатором кнопки del_a, div_2 с del_b и div_3 с del_c.Можно добавить максимум 3 деления.

Мне нужен jquery, который может добавлять и удалять div и повторно использовать div_1, div_2 и div_3 вместе с соответствующими идентификаторами кнопок.

Например, если пользователь удаляет div_2, а пользователь хочетчтобы добавить больше деления (которое можно добавить только на 1), jquery попытается найти существующие div и каким-то образом запомнить их.Поскольку div_2 не существует, div_2 будет добавлен, не имеет значения порядок.div_3 может идти первым до или после других div.

Я просто хочу дать пользователю свободу редактировать форму, начиная с этой массивной формы.Я не знаю, как сделать это в jQuery с помощью .each ().

Спасибо за вашу помощь.

Отредактировано: По умолчанию только div_1 существует наформа.Пользователь может свободно добавить еще 2 деления, чтобы добавить больше делений.У пользователя также есть возможность удалить div_1, когда существуют div_2 или div_3.Один div должен существовать.

Answer 1

вы можете использовать функцию detach() .... она просто удалит div и, если вы захотите добавить его снова, будет иметь ссылку на этот div и добавит его снова ... что-то вроде этого

предположим, пользователь удалил первый div, как этот ...

var div

$('#del_a').click(function(){
div= $('#div_1').detach();
});

...

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

$('#add_div').click(function(){
$(div).appendTo('where you want to append')
});

Я думаю, это может помочь тебе ..

Answer 2

If you want to delete div dynamically den use it:
$('#mydiv').empty();

Добавить / удалить динамически элемент HTML с помощью jQuery plz, см. Ниже Добавить / Удалить динамически элемент HTML с помощью jQuery

Answer 3

Работает нормально (Плз оптимизировал этот код) :)

<script type="text/javascript" >
$(document).ready(function(){
$('#add_div').click(function(){
    if(($('#del_a').is(":hidden"))){$("#del_a").show(); return; }
    if(($('#del_b').is(":hidden"))){$("#del_b").show(); return; }
    if(($('#del_c').is(":hidden"))){$("#del_c").show(); return; }
});
$('#del_a').click(function(){
    if($('#del_b').is(":hidden") && $('#del_c').is(":hidden") )
        return;
    $('#del_a').hide();
});
$('#del_b').click(function(){
    if($('#del_a').is(":hidden") && $('#del_c').is(":hidden") )
        return;
    $('#del_b').hide();
});
$('#del_c').click(function(){
    if($('#del_a').is(":hidden") && $('#del_b').is(":hidden") )
            return;
    $('#del_c').hide();
});

});

Answer 4

Вы можете иметь три переменные, действующие как флаги для существующих элементов div.Когда нажата кнопка добавления div, проверьте наличие первого флага, который не установлен, добавьте этот div и установите флаг для этого конкретного div.Если установлены все три флага, отключите кнопку добавления дополнительных элементов.Надеюсь это поможет.