Skip to content
🎵 A jQuery plugin that enables dynamic addition & deletion of HTML elements
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore v1.0.0 May 4, 2016
LICENSE Updates Chrome to v57 in README Mar 27, 2017
yarn.lock v1.3.0 - adds `classes.deleted` option Jan 22, 2017

addel Example

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

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

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

Table of Contents

Notable features

  • Lightweight
  • Maximum HTML flexibility
  • Events you can hook on
  • Declarative control
  • Keyboard convenience through smart focusing
  • Customizable animation


There are multiple options:

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


    // optional options object

⚠️ HTML structure and restrictions

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

As per RFC 2119:

  • .addel-container MUST be the element addel is initialized upon
  • .addel-container MUST contain everything else: .addel-target, .addel-delete and .addel-add
  • .addel-target MAY also contain your own element/s, this is after all what we are here for
  • .addel-delete MUST be .addel-container's and .addel-target's descendant
  • .addel-add MUST be .addel-container's descendant and MUST NOT be .addel-target's descendant

Note that class names are for reference only and are completely customizable, as described in the options section.


Name Type Default Info
hide boolean false Whether to initially hide the target (disables its form elements)
add integer 1 The number of targets clicking classes.add will add to the DOM string addel-target The class name of the element to be dynamically addeled
classes.add string addel-add The class name of the element that adds a target on click
classes.delete string addel-delete The class name of the element that deletes a target on click
classes.deleting string addel-delete The class name to be added to any target that is currently being deleted
animation.duration integer 0 The animation's duration (in milliseconds) when addeling
animation.easing string swing The animation's easing when addeling
events.add callback - Detailed in the events section
events.added callback - Detailed in the events section
events.delete callback - Detailed in the events section
events.deleted callback - Detailed in the events section
  • For more information on animation.duration and animation.easing, see jQuery's .fadeIn() and .fadeOut().
  • Note that it is possible to set the add option per element using a data-attribute, as described in the data-attributes section.

Options example

    hide: true,
    add: 2,
    classes: {
        target: 'person',
        add: 'btn-add',
        delete: 'btn-del'
    animation: {
        duration: 300,
        easing: 'linear'


Some options can be set declaratively as data-attributes on the HTML elements:

Option Data-attribute equivalent Placement
hide data-addel-hide container
add data-addel-add="<number>" container data-addel-target target
classes.add data-addel-add or data-addel-add="<number>" add
classes.delete data-addel-delete delete
animation.duration data-addel-animation-duration container
animation.easing data-addel-animation-easing container
  • Setting data-addel-add is the same as setting data-addel-add="1".
  • Setting data-addel-add="5" on .addel-container will make all .addel-add / data-addel-add elements inside of it add 5 targets on click, by default.
  • Specifying in addition a data-addel-add="10" on a specific .addel-add / data-addel-add will make that specific element add 10 targets, overriding the default 5 set earlier on the container.
  • Note that for elements to behave as buttons that add targets, you need to add either data-addel-add or data-addel-add="<number>" to the element, there's no need for both.

Data-attributes example

<div class="addel" data-addel-hide="true" data-addel-add="2">
    <div data-addel-target>
        <button data-addel-delete></button>
    <button data-addel-add="1"></button>  // adds 1 data-addel-target, as expected
    <button data-addel-add></button>      // adds 2 data-addel-target due to default set on .addel
    <button data-addel-add="3"></button>  // adds 3 data-addel-target on click, as expected
    $(function() {


Override the entire options object:

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

Or a specific option:

$.fn.addel.defaults.option = value;


Event Triggered when... Exposes
addel:add add is clicked
addel:added target is added to the DOM, event.added
addel:delete delete is clicked
addel:deleted target is removed from the DOM

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

Events example

Ask for confirmation before deleting:

    // other options

    events: {
        delete: function (event) {
            if (!window.confirm('Are you absolutely positively sure?')) {

Or bind the event yourself:

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


A more elaborate example of all of the above is included.


jQuery (v2-3).

Browser support

addel is developed using Chrome (v57). It should work properly on all evergreen browsers and IE9+.

Release policy

addel adheres to Semantic Versioning.


addel is released under the MIT license.

You can’t perform that action at this time.