addel is a simple & lightweight jQuery plugin for powering UIs that enable dynamic addition & deletion of HTML elements, conceived with form elements in mind.

"addel" is short for add-delete & should be pronounced Adele, just like the singer's name.

..Because it's all in the details, people!

• Lightweight
• Allows for maximum flexibility with your HTML structure
• Triggers custom events you can hook on
• Provides keyboard convenience through smart default focus behaviour
• Enables animation customization

There are multiple options:

• Download addel.jquery.js or addel.jquery.min.js
• Use Bower: bower install addel --save
• Use npm: npm install addel --save

And include it: <script src="/path/to/file/addel.jquery.min.js"></script>

$('.addel-container').addel({
  // optional options object
});

$('.addel-container').addel({
    hide: false,
    classes: {
        target: 'addel-target',
        add: 'addel-add',
        delete: 'addel-delete'
    },
    animation: {
        duration: 0,
        easing: 'swing'
    }
});

• hide: Whether to initially hide the target (and disable its form elements)
• classes.target: The class name of the element to be dynamically addeled™
• classes.add: The class name of the element that adds a target on click
• classes.delete: The class name of the element that deletes a target on click
• animation.duration: The animation's duration when addeling™
• animation.easing: The animation's easing when addeling™

For animation customization, see jQuery's .fadeIn() and .fadeOut()

Override the entire object:

$.fn.addel.defaults = {
    // options
}

Or a specific key:

$.fn.addel.defaults.option = value

<div class="addel-container">
  <div class="addel-target">
    <button class="addel-del"></button>
  </div>
  <button class="addel-add"></button>
</div>

• .addel-container must be the element addel is initialized upon
• .addel-container must contain everything else: .addel-target, .addel-delete & .addel-add
• .addel-target should also contain your own element/s, this is after all what we are here for
• .addel-delete must be .addel-container's & .addel-target's descendant
• .addel-add must be .addel-container's descendant & can't be .addel-target's descendant

All custom events are triggered on the element addel is initialized upon (AKA .addel-container).

Display a window.confirm() before deletion:

$('.addel').addel({
  // optional options
})
.on('addel:delete', function (event) {
  if (!window.confirm('Are you absolutely positively sure?')) {
    event.preventDefault();
  }
});

A more elaborate example is included.

jQuery (v2.2.4).

addel is developed and tested using Chrome (v50). Should work properly on all evergreen browsers and IE9+.

addel adheres to Semantic Versioning.

addel is released under the MIT license.