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

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

This is my code for add dynamic li tag:

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/knockout-2.0.0.js"></script>
</head>
<body>
    <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>
    </form>
 
    <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" />
        </li>
    </ul>
    You have <b data-bind="text: EmployeeList().length">&nbsp;</b>
    <span data-bind="visible: EmployeeList().length == 0"></span>
    <script>
        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() }));
                self.newEmployeeText("");
            };
           
        }
        ko.applyBindings(new TaskListViewModel());
    </script>
</body>
</html>

forum

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

Can you answer this question?

1 Answers