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.

Create Amazing Web-Based Interactive Tables and Spreadsheets | jExcel

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…