How to add and remove dynamic LI tag in UL tag using Knockout,js?

Total Post:36


 1613  View(s)
Rate this:

Hi I’m using knockout.js for add dynamic li tag

This is my code for add dynamic li tag:

<!DOCTYPE html>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/knockout-2.0.0.js"></script>
    <h3>Employee List</h3>
    <form data-bind="submit: addEmployee">
        Employee List:
        <input data-bind="value: newEmployeeText" placeholder="Enter employee name" />
        <button type="submit">Add</button>
    <ul data-bind="foreach: tasks, visible: tasks().length > 0">
        <li style="list-style: none">
            <input type="checkbox" data-bind="checked: isDone" />
            <input data-bind="value: title, disable: isDone" />
    You have <b data-bind="text: EmployeeList().length">&nbsp;</b>
    <span data-bind="visible: EmployeeList().length == 0"></span>
        function Task(data) {
            this.title = ko.observable(data.title);
            this.isDone = ko.observable(data.isDone);
        function TaskListViewModel() {
            var self = this;
            self.tasks =ko.observableArray([]);
            self.newEmployeeText =ko.observable();
            self.EmployeeList = ko.computed(function () {
                return ko.utils.arrayFilter(self.tasks(), function (task) { return !task.isDone() });
            self.addEmployee = function () {
                self.tasks.push(new Task({ title: this.newEmployeeText() }));
        ko.applyBindings(new TaskListViewModel());

  1. Re: How to add and remove dynamic LI tag in UL tag using Knockout,js?

    First you need to add delete button inside loop.

    <a href="#" data-bind="click: $parent.removeTask">Delete</a>

    Now add this knockout code in your script tag

    self.removeTask = function (task) {
    self.tasks.remove(task) };

      Modified On Apr-09-2018 02:05:08 AM


Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.