Add & Delete HTML DIV Dynamically

Question

I have a problem to add and delete html div dynamically. Below is the simplified code that I am working on:

<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>

This is the situation, div_1, div_2 and div_3 can be added and removed dynamically. div_1 will always be associated with button id del_a, div_2 with del_b and div_3 with del_c. It is only 3 divs maximum can be added.

I need jquery that can add and remove the div and reuse div_1, div_2 and div_3 along with the associated button ids.

For example, if the user delete the div_2, and the user want to add more division (which is only 1 more can be added), the jquery will try to find the existing divs, and somehow remember it. Since div_2 is not exist, div_2 will be added, does not matter the order. div_3 can go first before or after the other divs.

I just want to give freedom for the user to edit the form, since this massive form. I do not know how to do this in jQuery using .each().

Thanks for your help.

Edited: By default, only div_1 is exist on the form. The user can have the freedom to add another 2 divs to add more divs. The user is also have the capability to delete div_1 when either div_2 or div_3 exist. One div must be exist.

@Box9 What I mean is freedom to fill the information and to add or delete the div. Sorry, I might not ask clear here. By default, only div_1 is exist. The user can add another 2 div to add more information. — Arief
– Arief, Commented Feb 10, 2011 at 5:24

Vivek · Accepted Answer · 2011-02-10 05:23:21Z

3

you can use detach() function....it will simply remove the div and if you want to add it again have, a reference of that div and add it again..something like this

suppose, user deleted the first div like this...

var div

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

...

and when user click on add button you can do something like this...

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

i think this might help you..

answered Feb 10, 2011 at 5:23

Vivek

11k15 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:55:43Z

1

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

Add /Remove dynamically HTML element with jQuery plz see below Add /Remove dynamically HTML element with jQuery

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Feb 10, 2011 at 5:15

Manish Trivedi

3,5575 gold badges27 silver badges29 bronze badges

3 Comments

Arief Over a year ago

The problem is how to add another divs and using the either div_1, div_2 and div_3, depending on the existing divs.

Arief Over a year ago

I know how to add, I just don't know how to write the jQuery to detect the existing div before adding another div which only 3 divs maximum can be added. One div must exist, does not matter which div, it can be div_1, div_2 or div_3.

Arief Over a year ago

I'll wait. I am still playing with it to get the best solution.

Harish · Accepted Answer · 2011-02-10 05:16:51Z

0

You can have three variables acting as flags for the divs present. When the add div button is clicked, check for the first flag which is not set, add that div and set the flag for that particular div. If all three flags are set, then disable the add more divs button. Hope this helps.

answered Feb 10, 2011 at 5:16

Harish

2261 silver badge7 bronze badges

Comments

Manish Trivedi · Accepted Answer · 2011-02-11 04:43:28Z

0

Its working fine (Plz optimized this code) :)

<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();
});

});

edited Feb 11, 2011 at 4:43

answered Feb 10, 2011 at 12:12

Manish Trivedi

3,5575 gold badges27 silver badges29 bronze badges

1 Comment

Manish Trivedi Over a year ago

@Arief:: I'm also waiting your response... :)

Collectives™ on Stack Overflow

Add & Delete HTML DIV Dynamically

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related