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>