Add and remove list items from EJ2 JavaScript ListView control

1 Mar 20257 minutes to read

You can add or remove list items from the ListView control using the addItem and removeItem methods. Follow these steps to add or remove a list item in the ListView control:

  • Render the ListView with a data source. Use the template property to append a delete icon for each list item. Bind the click event for the delete icon using the actionComplete handler.

  • Render the “Add Item” button and bind the click event. In the click event handler, pass data with a random ID to the addItem method to add a new list item when the “Add Item” button is clicked.

  • Bind the click handler to the delete icon created in the first step. Within the click event, remove the list item by passing the list item corresponding to the delete icon to the removeItem method.

var data = [
    { text: "Hennessey Venom", id: "1", icon: "e-icons e-circle-close" },
    { text: "Bugatti Chiron", id: "2", icon: "e-icons e-circle-close" },
    { text: "Bugatti Veyron Super Sport", id: "3", icon: "e-icons e-circle-close" },
    { text: "Aston Martin One- 77", id: "4", icon: "e-icons e-circle-close" },
    { text: "Jaguar XJ220", id: "list-5", icon: "e-icons e-circle-close" },
    { text: "McLaren P1", id: "6", icon: "e-icons e-circle-close" }
];
//Initialize ListView control
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 = 'e-icons e-circle-close'></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: "e-icons e-circle-close"
    };
    listviewInstance.addItem([data]);
    listviewInstance.dataBind();
    onComplete();
};
//method for actionComplete handler
function onComplete() {
    var iconEle = document.getElementsByClassName("e-circle-close");
    //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.closest(".e-list-item");
    listviewInstance.removeItem(liItem);
    onComplete();
}
<!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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>
    <style>
        #sample-list-flat {
            margin: 40px auto;
            max-width: 350px;
        }

        #btn {
            margin: 40px auto;
            display: block;
        }

        #sample-list-flat .e-circle-close {
            float: right;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

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