Adding and Removing Elements on the Fly Using JavaScript

I've done some work to try to simplify the process of adding and removing elements to a page dynamically. For basic applications, the addElement() and removeElement() functions I've written should be able to handle the job. For more complex applications, you'll have to pick apart the code and write your own methods.

Adding Elements Dynamically

The addElement() function is simple if you understand its arguments. The way it works is by appending a new child element to a parent element. The parent element is specified using the parentId argument. The type of element to be created is specified using the elementTag argument. The new element's ID is specified using the elementId argument. Lastly, the innerHTML of the new element is specified using the html argument.

function addElement(parentId, elementTag, elementId, html) {
    // Adds an element to the document
    var p = document.getElementById(parentId);
    var newElement = document.createElement(elementTag);
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;

You could take advantage of this by creating a container with addElement() and sneaking some more elements inside html, as you'll see in the example below.

Removing Elements Dynamically

Removing an element is much easier, as it only requires the element's ID.

function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);


Similar to the way Gmail handles file attachments, let's create a simple form to upload as many files as the user wants. First, we'll take a look at the XHTML.

<form enctype="multipart/form-data" action="" method="post">
    <p>Upload file(s)</p>
    <div id="files">
        <p><input type="file" name="uploaded_file[]" /></p>
    <p><input type="button" value="Add File" onclick="addFile();" /></p>

Which produces something like this:

Upload form

Now we have to create the addFile() function, which will be called when the user clicks on 'Add File'.

var fileId = 0; // used by the addFile() function to keep track of IDs

function addFile() {
    fileId++; // increment fileId to get a unique ID for the new element
    var html = '<input type="file" name="uploaded_files[]" /> ' +
               '<a href="" onclick="javascript:removeElement('file-' + fileId + ''); return false;">Remove</a>';
    addElement('files', 'p', 'file-' + fileId, html);

As you can see, we'll be using addElement() to create a new p which contains the file input element, rather than just creating a new file input element by itself. In this manner, the p works as a wrapper and allows us to also add a 'Remove' link next to each file input element we create.

When 'Add File' is clicked, the p (and its contents) are appended to the files div:

Upload form with remove link

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.