jQuery CRUDListin

Lightweight jQuery plugin to enable dynamic CRUD list to add/remove/edit elements in a dynamic list and/or table. It is super simple and style (CSS) agnostic.

Install

Bower

Run this command:

$ bower install jquery-crudlistin 

npm

Run this command:

$ npm i jquery-crudlistin 

Manual

Just copy the file from "dist" into your project

How to use

This is how you activate and use the plugin:

$('.crud-listin').crudlistin({   newButton: $('#list-add-btn') });

Corresponding HTML (you need to have a data-prototype attribute in the main list element):

<a href="#" id="list-add-btn">Add element</a> <div class="crud-listin" data-prototype="&lt;div class=&quot;crud-item&quot;&gt;This is element number __name__ &lt;a href=&quot;#&quot; class=&quot;delete-item-btn&quot;&gt;Remove&lt;/a&gt;&lt;/div&gt;"> </div>

How it will look after adding two elements

<a href="#" id="list-add-btn">Add element</a> <div class="crud-listin" data-prototype="&lt;div class=&quot;crud-item&quot;&gt;This is element number __name__ &lt;a href=&quot;#&quot; class=&quot;delete-item-btn&quot;&gt;Remove&lt;/a&gt;&lt;/div&gt;">   <div class="crud-item">This is element number 0 <a href="#" class="delete-item-btn">Remove</a></div>   <div class="crud-item">This is element number 1 <a href="#" class="delete-item-btn">Remove</a></div> </div>

Options

These are all the default options:

$('.crud-listin').crudlistin({   newButton: null,   removeButtonSelector: '.delete-item-btn',   newItemLast: true,   itemClass: 'crud-item',   itemIndexPlaceholder: /__name__/g,   beforeAddElement: function() {},   afterAddElement: function(newItem) {},   beforeRemoveElement: function(item) {},   afterRemoveElement: function() {} });

• newButton: the "Add" or "New" button which click will add a new element
• itemClass: class to identify an element from the list
• removeButtonSelector: selector to identify the "Remove" button.
• newItemLast: indicates whether add new items at the end of the list (true) or at the beginning (false)
• itemIndexPlaceholder: placeholder, inside the prototype, where the list index should be. It will be replaced by the index number for the corresponding element when adding

Events

• beforeAddElement: fires before adding the element. Return false to cancel.
• afterAddElement: fires after adding the element. newItem is the item being added.
• beforeRemoveElement: fires before removing the element. item is the item about to be removed. Return false to cancel.
• afterRemoveElement: fires after removing the element.