Clone DOM Elements With OR Without Form Values - jQuery simpleClone.js

A simple jQuery clone plugin that offers an easy way to clone blocks of HTML without copying and pasting. 

The typical use of the plugin is to simplify the task of duplicating any number of form fields with or without values.

Cloning HTML DOM elements is a common practice to use as a one-to-one visual representation of an existing object. There are a number of ways to clone DOM elements but doing so efficiently is sometimes a challenge.

In jQuery, you can use the clone() or copy() methods, but both yield different results when cloning an element with child elements, attributes and values. This plugin serves as an alternative that yields better results.

How to use it:

1. Download and load the minified version of the simpleClone.js plugin after jQuery (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.simpleClone.min.js"></script>

2. Add the elements to be cloned into a container named 'simpleClone-clnElem'.

<div class="simpleClone-clnElem">
  <input value="jQueryScript" />
  <input value="CSSScript" />
</div>

3. Create a button to clone the elements.

<div class="simpleClone-btnWrap">
  <button type="button" class="addBtn">
    + Clone +
  </button>
</div>

4. Call the function simpleClone on the clone button and done.

$(function(){
  $('.addBtn').simpleClone({
    // options here
  });
});

5. Determine whether to ignore value when cloning form fields. Default: true.

$(function(){
  $('.addBtn').simpleClone({
    copyValue: false,
  });
});

6. Set the maximum number of clones. Default: false.

$(function(){
  $('.addBtn').simpleClone({
    cloneLimit: 3,
    limitMessageText: 'Maximum count has been reached.',
  });
});

7. Set the text to display on the Remove button. Default: 'Remove'.

$(function(){
  $('.addBtn').simpleClone({
    removeButtonText: 'Clear',
  });
});

8. Override the default CSS selectors.

$(function(){
  $('.addBtn').simpleClone({
    limitMessageClass: 'simpleClone-clnLmt',
    targetClass: 'simpleClone-clnElem',
    addButtonWrapClass: 'simpleClone-btnWrap',
    removeButtonClass: 'simpleClone-rmvBtn',
  });
});

9. Callbacks and functions.

$(function(){
  $('.addBtn').simpleClone({
    filterCloneElement: function(elems, $clone, opts){
      // ...
    },
    onClone: function(elems, $clone, opts){
      // ...
    },
    onComplete: function(elems, $clone, opts){
      // ...
    },
    onRemove: function(elems, $clone, opts){
      // ...
    },
    onCompleteRemove: function(elems, $clone, opts){
      // ...
    },
  });
});

---

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