August 15, 2022

A JavaScript Library That Offers Interactive Lists | ListExtender.js

ListExtender.js is a simple JavaScript library for manipulating lists that can be used to add, remove, edit, sort, check or have items in List view.


  • Double-click the menu items to edit them.
  • Add new menu items with the input field.
  • Sort menu items by drag and drop.
  • Optional delete button for each menu item.
  • 8 subjects.

How to make use of it:

1. Load the ListExtender JavaScript library within the HTML.

<script src="js/ListExtender.js"></script>

2. Create a brand new occasion of the List Extender.

const myList = new ListExtender();

3. Insert the checklist into your content material.

myList.addAfter('#myList h2');

4. Set the placeholder of the input field.

myList.setPlaceholder('Type something here!');

5. Set the preliminary checklist gadgets utilizing the addFromArray technique.

myList.addFromArray(['', '', '', '']);

6. Apply a customized validator to the checklist.

myList.validateList.addValidation(value => {
  return (value.match(/\d{4}-\d{2}-\d{2}/) && value.match(/\d{4}-\d{2}-\d{2}/)[0] === value) ||
  (value.match(/\d{2}\/\d{2}\/\d{4}/) && value.match(/\d{2}\/\d{2}\/\d{4}/)[0] === value) ||
  (value.match(/\d{8}/) && value.match(/\d{8}/)[0] === value)
}, 'Please follow specified format!!')

7. Set the checklist theme. Available themes:


8. Available choices.

const myList = new ListExtender({

      // is unordered list
      isUnordered: true,

      // allows sortable
      allowReorder: true,

      // shows delete button
      showDeleteButton: false,

9. More API strategies.

// set the input type:
// 'text'
// 'email'
// 'password'
// 'date'
// 'month'
// 'number'
// 'time'
// 'url'
// 'week'

// set the minimum length of the input field

// set the maximum length of the input field

// apply a unique ID to the lsit

// apply additional CSS classes to the list

// remove CSS classes from the list

// add a new item to the list

// append the list before the element

// get data

Easy List Manipulation JavaScript Library, ListExtender.js Plugin/Github

See Demo And Download

Official Website(JLambertazzo): Click Here

This superior jQuery/javascript plugin is developed by JLambertazzo. For extra Advanced usage, please go to the official website.


You may also like...

Leave a Reply

Your email address will not be published.