jQuery CRUDListin - the lightweight plugin for CRUD lists

CRUDListin is a lightweight jQuery plugin for making easier the CRUD (Create-Read-Update-Delete) operations of a DOM elements list. 

To be honest, it mainly focuses on the Read (which is a given), Create and Delete operations since the Update is up to the developer.

Let's say you have an HTML table and you want to allow the user to dynamically add/remove rows from the frontend (client-side). Or let's say you have a list of elements (DIVs or LIs for example) and you want to allow the user to add/remove them from that list. For those cases this is a very simple plugin for doing just that.

You can even handle different events fired by the plugin, to perform some actions before or after adding or removing an element.

Examples and use

Here are some examples to better illustrate how it is used.

List

HTML markup:

<a href="#" id="list-add-btn">Add element</a>
<div 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>

Javascript activation:

Resulting markup after adding two rows:

<a href="#" id="list-add-btn">Add element</a>
<div 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>This is element number 0 <a href="#">Remove</a></div>
  <div>This is element number 1 <a href="#">Remove</a></div>
</div>

Table

HTML markup

<a href="#" id="row-add-btn">Add row</a>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-prototype="&lt;tr class=&quot;crud-item&quot;&gt;
      &lt;td&gt;__name__&lt;/td&gt;
      &lt;td&gt;&lt;a href=&quot;#&quot; class=&quot;delete-item-btn&quot;&gt;Remove&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;">
    </tbody>
</table>

Javascript activation:

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

Resulting markup after adding two rows

Download and install

You can view the code and download the plugin from: https://github.com/improvein/jquery-crudlistin

At the time of writing this post, the latest version of the plugin is v1.2.6