Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JQuery plugin for easily adding/removing elements from the page.
Branch: master
Failed to load latest commit information.
.gitignore Initial commit of plugin and readme with example usage
README.md Corrected documentation to include the removes method when cloned tem…
jquery-addable.js

README.md

jquery-addable.js

A simple jquery library for dynamically adding and removing DOM elements such as form fields.

Features

  • Add or remove any element by selector when the 'add' control element is clicked.
  • Easily remove parent of the 'remove' control element.
  • Add elements using a simple html template.
  • Label added elements with a counter (e.g. element 1, element 2...) anywhere within the element.

Basic Usage

<form id="form">

    <div class="parent_container">

        <div class="template_element">
            <label for="some_input"></label>
            <input type="text" name="some_input" />
            <a href="#" class="remove">Remove This</a>
        </div>

    </div>

    <a href="#" class="add_field">Add Field</a>

</form>


<script type="text/javascript">

    $('#form .add_field').adds('#form .parent_container .template_element');

</script>

Without removing the cloned element

<form id="form">

    <div class="parent_container">

        <div class="template_element">
            <label for="some_input"></label>
            <input type="text" name="some_input" />
            <a href="#" class="remove">Remove This</a>
        </div>

    </div>

    <a href="#" class="add_field">Add Field</a>

</form>


<script type="text/javascript">

    $('#form .add_field').adds('#form .parent_container .template_element', { removeOriginal : false });
    $('.remove').removesParent(); // Apply remove to template element

</script>

Cloning a "template" with a counter

<form id="form">

    <div class="parent_container">

        <div class="template_element">
            <label for="some_input_counter">Input counter</label>
            <input type="text" name="some_input_counter" />
            <a href="#" class="remove">Remove This</a>
        </div>

    </div>

    <a href="#" class="add_field">Add Field</a>

</form>

<script type="text/javascript">

    $('#form .add_field').adds('#form .parent_container .template_element', { counter : 'counter', count : 1 });

</script>
Something went wrong with that request. Please try again.