A simple jquery library for dynamically adding and removing DOM elements such as form fields.
- 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.
<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>
<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>
<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>