I was following this tutorial (https://vimeo.com/104896353) to learn how to create a todo list. But it ends without explaining how to remove an item from the list. Could somebody please post a sample code for it?

Here is the content of Todo\default.htm:

<script type="text/javascript" src="{{ ['assets/vendor/jquery.min.js']|theme }}"></script>
{% framework %}

<form 
    data-request="{{ __SELF__ }}::onAddItem" 
    data-request-success="$('#inputItem').val('')"
    data-request-update="'{{ __SELF__ }}::tasks': '#result'"
>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Tasks assigned to: {{__SELF__.name}} </h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <input name="task" type="text" id="inputItem" class="form-control" value=""/>
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">Add</button>
                </span>
            </div>  
        </div>
        <ul class="list-group" id="result">
            {% partial __SELF__ ~ '::tasks' tasks = __SELF__.tasks %}
        </ul>
    </div>
</form>

And the content of tasks.htm partial:

{% for task in tasks %}
    <li class="list-group-item">
        {{ task }}
        <button class="close pull-right">&times;</button>
    </li>
{% endfor %}

I need to get the [X] button which removes a single task from the todo list working. My guess is that I should go with this:

{% for task in tasks %}
    <li class="list-group-item">
        {{ task }}
        <button class="close pull-right" data-request="{{ __SELF__ }}::onDeleteItem">&times;</button>
    </li>
{% endfor %}

I don't know though how to pass the id of each item to the onDeleteItem function.

Last updated 8 years ago

Hi, see in http://stackoverflow.com/questions/33995315/octobercms-how-to-remove-an-item-from-todo-list/34087376#34087376

It works for me

Bye Ivica