JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Add and remove list items from listview in JavaScript (ES5) ListView control

17 Mar 2023 / 3 minutes to read

You can add or remove list items from the ListView control using the addItem and removeItem methods. Refer to the following steps to add or remove a list item.

  • Render the ListView with data source, and use the template property to append the delete icon for each list item. Also, bind the click event for the delete icon using the actionComplete handler.
  • Render the Add Item button, and bind the click event. On the click event handler, pass data with random id to the addItem method to add a new list item on clicking the Add Item button.
  • Bind the click handler to the delete icon created in step 1. Within the click event, remove the list item by passing the delete icon list item to removeItem method.
Source
Preview
index.js
index.html
index.css
Copied to clipboard
var data = [
        { text: "Hennessey Venom", id: "1", icon: "delete-icon" },
        { text: "Bugatti Chiron", id: "2", icon: "delete-icon" },
        { text: "Bugatti Veyron Super Sport", id: "3", icon: "delete-icon" },
        { text: "Aston Martin One- 77", id: "4", icon: "delete-icon" },
        { text: "Jaguar XJ220", id: "list-5", icon: "delete-icon" },
        { text: "McLaren P1", id: "6", icon: "delete-icon" }
    ];
    //Initialize ListView component
    var listviewInstance = new ej.lists.ListView({
        //set dataSource
        dataSource: data,
        //map the appropriate columns to fields property
        fields: { text: "text", iconCss: "icon" },
        //set the template for list items
        template: "<div class='text-content'> ${text} <span class = 'delete-icon'></span> </div>",
        //event handler to bind click event for delete icon
        actionComplete: onComplete
    });
    //Render initialized ListView
    listviewInstance.appendTo("#sample-list-flat");
    // Initialize the Button component.
    var button = new ej.buttons.Button();
    // Render initialized button.
    button.appendTo("#btn");
    //event handler to add the list item on button click
    document.getElementById("btn").onclick = function () {
        var data = {
            text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
            id: (Math.random() * 1000).toFixed(0).toString(),
            icon: "delete-icon"
        };
        listviewInstance.addItem([data]);
        listviewInstance.dataBind();
        onComplete();
    };
    //method for actionComplete handler
    function onComplete() {
        var iconEle = document.getElementsByClassName("delete-icon");
        //event handler to bind click event for delete icon
        Array.from(iconEle).forEach(function (element) {
            element.addEventListener("click", deleteItem.bind(this));
        });
    }
    //method to delete list item
    function deleteItem(args) {
        args.stopPropagation();
        var liItem = args.target.parentElement.parentElement;
        listviewInstance.removeItem(liItem);
        onComplete();
    }
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="sample-list-flat"></div>
        <button id="btn"> Add Item </button>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: "Helvetica Neue", "calibiri";
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#sample-list-flat {
  margin: 40px auto;
  max-width: 350px;
}

#btn {
  margin:40px auto;
  display:block;
}
/* csslint ignore:start */

@font-face {
  font-family: "e-icon";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmXOniGAAAAcgAAAFAaGVhZBC1AhkAAADQAAAANmhoZWEIUQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCgAAAAAAHAAAAABm1heHABDgCYAAABCAAAACBuYW1lv4Bt4QAAAwgAAAIZcG9zdJx8QW4AAAUkAAAAOwABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAApWcDV18PPPUACwQAAAAAANbRXpQAAAAA1tFelAAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAACAIwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAoAAAAAIAAAAAA/QD9AALAIsAAAEHFwcnByc3JzcXNwUfHz8fLx8PHgLuhIRrg4NrhIRrg4P9iQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgEBAgMEBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwICg4OGa4SEa4ODaoCE7hoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAQIDBAYHBwkLCwwNDg8PERESExQUFRYWFxcXGRgZGRoaGRkYGRcXFxYWFRQUExIREQ8PDg0MCwsJBwcGBAMCAQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAGAAEAAQAAAAAAAgAHAAcAAQAAAAAAAwAGAA4AAQAAAAAABAAGABQAAQAAAAAABQALABoAAQAAAAAABgAGACUAAQAAAAAACgAsACsAAQAAAAAACwASAFcAAwABBAkAAAACAGkAAwABBAkAAQAMAGsAAwABBAkAAgAOAHcAAwABBAkAAwAMAIUAAwABBAkABAAMAJEAAwABBAkABQAWAJ0AAwABBAkABgAMALMAAwABBAkACgBYAL8AAwABBAkACwAkARcgZGVsZXRlUmVndWxhcmRlbGV0ZWRlbGV0ZVZlcnNpb24gMS4wZGVsZXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABkAGUAbABlAHQAZQBSAGUAZwB1AGwAYQByAGQAZQBsAGUAdABlAGQAZQBsAGUAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABkAGUAbABlAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwARY2lyY2xlLWNsb3NlLS0tMDIAAAA=)
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* csslint ignore:end */

#sample-list-flat .delete-icon::after {
  font-family: "e-icon";
  content: "\e700";
  float: right;
  cursor: pointer;
}
Previous
Next