How to dynamically add Some element in HTML page

JavaScript
, , ,
1

Hi there

Here is my code

What I want is onClick of add a new block of same data(name of org,Role,Year…) will be add and there is a button that will remove that block…

Don’t know how to acheieve this any help?

Thanks

2

One way to do it is to remove templates from the page to a separate location, so that they can then be added to the page on an as-needed basis. This is a useful technique that can be used to handle multiple templates too.

Because unique identifiers have to be unique, we need to change all id attributes to class attributes too.

<div class="template">
    <div class="emp_detail">
        ...
    </div>
</div>

We can retrieve any of the template areas and store them away. If they have a class name we can store them using that name, or otherwise default to template0, template1, etc.

function initTemplates() {
    $('.template').each(function () {
        var template = $(this).children(),
            key = template.attr('class') || 'template' + templates.length;
        templates[key] = template;
        $(this).remove();
    });
}
var templates = {};
initTemplates();

When adding the content, we can add it to the items div

<div id="items">
</div>

//when the Add Field button is clicked
$(".add").click(function () {
    //Append a new row of code to the "#items" div
    $('#items').append(templates['emp_detail'].clone());
});

And we can watch the page for the delete buttons, and take appropriate action when they’re clicked.

$(".deletefile").click(function () {
    $(".deletefile").parent("div").remove();
});

See http://jsfiddle.net/pmw57/3zhhh9wt/1/ for a working demo based on what you had.

2 Likes
3

Thanka @Paul_Wikins this is what I want…

You saved my day thanks a lot

4

Although code is working fine but suddenly add tag is closing some time.

I am opening add Button on Click of a RadioButton.

Don’t know why?

5

Can we see the code that you’re having trouble with? HTML too please.

6

Check this is my Complete code of registration form

7

You have placed the add button inside of a form, and that button is attempting to submit the form.

You need to tell the form that it is only to be treated as a button, which is done by saying what type it is.

<button type="button" class="add">Add</button>
8

Awesome man you rock…
Thanks

Is there any PM system in this website?

9

Yes there is - click on a persons name to find it.

10

I have clicked on name but I have not found any link for PM

11

You are a “new” user.
To be able to PM you’ll need to read a few other topics.

12

“To be able to PM you’ll need to read a few other topics.”

what this mean more post i need to post or something else?

13

https://meta.discourse.org/t/what-do-user-trust-levels-do/4924/4?u=mittineague

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.