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 elements ID is specified using ths 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;
    p.appendChild(newElement);
}

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 elements ID.

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

Example

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>
    </div>
    <p><input type="button" value="Add File" onclick="addFile();" /></p>
</form>

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

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.