Dynamic Form Element Creation And Deletion Plugin - Addel

Addel is a jQuery plugin that allows to dynamically add, duplicate and remove fields (input, select, textarea) in a form as needed.

See also:

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

How to use it:

1. Place jQuery library and the jQuery Addel plugin at the end of the html document.

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

2. Create a form field with add/delete buttons on the webpage.

<div class="target">
  <div class="target">
    <input type="text" name="text">
    <button type="button" class="addel-delete">Delete</button>
  </div>
  <button type="button" class="addel-add">Add</button>
</div>

3. Just call the plugin and you're done.

$('.addel').addel({
  classes: {
    target: 'target'
  }
})

4. Configuration options with default values.

$('.addel').addel({

  // hide the form elements
  hide: false,

  // CSS classes for target and add/delete buttons
  classes: {
    target: 'addel-target',
    add: 'addel-add',
    delete: 'addel-delete',
    deleting: pluginName + '-deleting'
  },

  // animation options
  animation: {
    duration: 0,
    easing: 'swing'
  }
  
})

5. Events.

$('.addel').addel({
  // options here
})

  .on('addel:delete', function (event) {
    // Triggered when delete button is clicked
  }

  .on('addel:deleted', function (event) {
    // Triggered when a field is deleted
  }

  .on('addel:add', function (event) {
    // Triggered when add button is clicked
  }

  .on('addel:added', function (event) {
    // Triggered when a field is added
  }
  
});

Change log:

v1.3.2 (2017-03-27)

• addel:added and added:deleted now respect the animation's duration

v1.3.1 (2017-03-26)

• Fixed event.preventDefault() bug

v1.3.0 (2017-01-23)

• Added classes.deleting option
• Minor code refactoring

v1.2.1 (2016-08-13)

• bug fixed

v1.1.1 (2016-05-26)

• bug fixed

---

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