jQuery Plugin To Create Repeatable DOM Elements - Repeter

Repeter is a jQuery plugin that dynamically creates repeatable DOM elements with 'Add new' and 'Delete' buttons. Useful for dynamic forms that allow the user to add as many form fields as possible.

See also:

• jQuery Plugin To Duplicate Form Groups - addMore
• jQuery Plugin For Dynamic form Field generator - DuplicateElement 
• jQuery Plugin To Duplicate and Remove Form Fieldsets - Multifield
• Dynamically Add / Remove Html Elements with jQuery Duplicate Plugin

How to use it:

1. Load the jQuery Repeter plugin's script after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jquery.repeter.js"></script>

2. Load the jQuery Templates plugin to render the specified HTML content as a template.

<script src="/path/to/jquery.tmpl.min.js"></script>

3. The basic HTML structure.

<div class="dynamic">
  <ul class="repeter">
    <li class="element">Item Inicial <button type="button" class="add">Add New Item</button></li>
    <script class="template" type="text/x-jQuery-tmpl">
      <li>Item ${numElement} <button type="button" class="remove">Remove</button></li>
    </script>
  </ul>
</div>

4. Initialize the plugin by calling the function on the top container.

$('.dynamic').repeter();

5. Plugin's default options.

$('.dynamic').repeter({
  addBtnSelector:'.add',
  remBtnSelector:'.remove',
  tplSelector: '.template',
  formSelector: 'form',
  elements: {
    class: 'element',
    insertIn: null,
    removeClasses: null,
    mirror:{
      selector: null,
      tplSelector: null,
      removeClasses: null
    }
  }
});

Change log:

2016-06-03

• minor bugfixes
• allows dynamic content

---

This awesome jQuery plugin is developed by elib0. For more Advanced Usages, please check the demo page or visit the official website.