jQuery Plugin To Create Repeatable DOM Elements - Repeter

jQuery Plugin To Create Repeatable DOM Elements - Repeter
File Size: 67.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.