How to dynamically add html elements with jquery?

Question

My goal is to have one element on initial load, this element should have id="something_O", when a add link is clicked, underneath already existing element, new, the same html element should be added,not with id="something_o", but with id="something_1", or last element + 1, to be specific. The user should be able to add these elements infinitely. When the user clicks deleted, element should disappear.

Example of this case

Any ideas? Here is prepared fiddle for easier help...

@DennisTraub, I have trouble from the start, how to generate elements... — Davor Zubak
– Davor Zubak, Commented Jan 17, 2012 at 10:04
ref: api.jquery.com/clone And, could you explain why you want to maintain the counted ids? I don't really see a use for that for using them with css would mean you'd need every possible id before-hand. — Yoshi
– Yoshi, Commented Jan 17, 2012 at 10:05
@Yoshi, thanks , I need id's for extracting data later on, the css id's dont need to be id's, could be class. I take a look at he clone(). — Davor Zubak
– Davor Zubak, Commented Jan 17, 2012 at 10:11
How would you use such an id? You could simply use the elements index (position in it's parent element), which would be exactly the numbering you try to achieve (and you wouldn't even have to maintain it). — Yoshi
– Yoshi, Commented Jan 17, 2012 at 10:15
@Yoshi, I need id's for extracting values from graph that is located in this div, so i can pass params to mvc controller. — Davor Zubak
– Davor Zubak, Commented Jan 17, 2012 at 10:21

Ketan Modi · Accepted Answer · 2012-01-17 10:15:42Z

3

var counter = 1;
$('.AddEl').live('click', function () {
    var el = $('#element_1').clone().attr('id', 'element_' + ++counter).appendTo('body');
});

$('.RemoveEl').live('click', function () {
    var el = $(this).parents('.elem')
    if (el.get(0).id !== 'element_1') el.remove();
});

Check this here

answered Jan 17, 2012 at 10:15

Ketan Modi

1,8001 gold badge16 silver badges30 bronze badges

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

5 Comments

Davor Zubak Over a year ago

Thanks, element_0 should be removable, there always must be one element, not necesary element_0??

Davor Zubak Over a year ago

I mean, first[0] element sholud be removable, in your example it canot be removed?

Davor Zubak Over a year ago

Something like this: $(this).closest('.actions').parent().remove(); but that one element always stays??

Ketan Modi Over a year ago

That is because I've used element_1 to create clones. Do you want me to modify the code?

Davor Zubak Over a year ago

yes, but one element should remaine, not depended on Id_number

David Thomas · Accepted Answer · 2012-01-17 11:42:42Z

3

One means to do this is:

$(document).ready(function() {
    $('body').on('click', '.AddEl', function() {
        $('.actions:first')
            .parent()
            .clone()
            .attr('id', 'element_' + $('.actions').length)
            .insertAfter($('.actions:last').parent());
    });
    $('body').on('click', '.RemoveEl', function() {
        $(this).closest('.actions').parent().remove();
    });
});

JS Fiddle demo.

Please note that I've amended your html so that the first element to be cloned is now id="element_0", and targeted that, and all subsequently-created elements, with the CSS selector:

div[id^=element] {
    /* css */
}

This could be simplified, but these are simply my first thoughts.

Edited to offer a slightly improved version, in that the initial addition is slightly, or seems a little, more concise, and also features a means to prevent duplicate ids being generated if elements are added/removed:

$(document).ready(function() {
    $('body').on('click', '.AddEl', function() {
        var $elems = $('.actions').parent();
        $elems
            .first()
            .clone()
            .insertAfter($elems.last());
        $('div[id^="element_"]').each(
            function(i){
                $(this).attr('id','element_' + i);
            });
    });
    $('body').on('click', '.RemoveEl', function() {
        $(this).closest('.actions').parent().remove();
    });
});

JS Fiddle demo.

edited Jan 17, 2012 at 11:42

answered Jan 17, 2012 at 10:09

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

Sarah Groß Over a year ago

If he wanted to keep the enumeration starting with 1, he could just add a +1 to this line: .attr('id', 'element_' + $('.actions').length+1)

David Thomas Over a year ago

He could, but it seems a little needless, and I should edit in an amendment to make sure that, on deletion and addition, a duplicate id isn't created...

Kannika · Accepted Answer · 2012-01-17 10:57:37Z

1

I just overwrite to your code.

You can try this, may something you want.

http://jsfiddle.net/kongkannika/QeSPP/34/

edited Jan 17, 2012 at 10:57

answered Jan 17, 2012 at 10:24

Kannika

2,5662 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to dynamically add html elements with jquery?

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related