Remove Items from ListBox
There are two was to remove items from a ListBox: removing item one by one or clearing the whole list at once. You can do this either by manipulating the array from this the list is created using standard JavaScript methods for an array and then update the items property of the ListBox, or by using built-in methods.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to remove items from ListBox component.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
Using control panel on the right side, you can see how each of these built-in methods for removal of items is used. Whenever item is deleted, notification message will popup stating the removed item.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Delete Item from ListBox
Any existing item in the list can also be removed. For this purpose three methods are available:
- removeItem - Removes a specified item from the list
- removeItemAt - Removes an item which is located at specified index
- clearItems - Clears the list and removes all items from the ListBox
In following example we are showing how to remove the currently selected item from the ListBox.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
In similar way as with methods for adding items, whenever an item is deleted from the ListBox, the itemRemoving and itemRemoved events are fired. By handling the itemRemoving event you can prevent a specific item to become deleted when some condition is fullfilled.
Conclusion
The list shown in the ListBox component is determined by an array that holds item objects. You can modify this array using standard JavaScript methods or using already built-in methods to remove items on demand. Whenever an item is removed, a corresponding event is fired that you can handle in your code and add custom actions specific to your application, like approve removal only if some condition(s) is fulfilled.
ListBox is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.