> For the complete documentation index, see [llms.txt](https://docs.starcounter.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.starcounter.io/2.3.2/hello-world-tutorial/cancel-and-delete.md).

# Cancel and Delete

You have probably noticed that in the current app you can only add new expenses. That means that the database and the list of expenses will continue to grow endlessly.

In this part, we will add a cancel and delete button which allows the user to either cancel a change that has not been committed or delete all the expenses of a person.

Similar to how the "Add new expense" button was implemented, the process to add this functionality requires three steps:\
1\. Add trigger properties\
2\. Add elements to increment the trigger properties\
3\. Add event handlers

## Adding Trigger Properties

We start by adding our needed trigger properties for our future buttons to the `PersonJson.json`.

{% code title="PersonJson.json" %}

```javascript
{
  "Html": "/HelloWorld/PersonJson.html",
  "FirstName$": "",
  "LastName$": "",
  "SaveTrigger$": 0,
  "FullName": "",
  "Expenses": [{}],
  "NewExpenseTrigger$": 0,
  "CurrentBalance": 0,
  "CancelTrigger$": 0,
  "DeleteAllTrigger$": 0
}
```

{% endcode %}

## Add Buttons to the View

Now, let's add the buttons that will increment these values in the same way that our save and new expense button does now.

Delete button:

{% code title="PersonJson.html" %}

```markup
<button value="{{model.DeleteAllTrigger$::click}}" onmousedown="++this.value">Delete all expenses</button>
```

{% endcode %}

Cancel button:

{% code title="PersonJson.html" %}

```markup
<button value="{{model.CancelTrigger$::click}}" onmousedown="++this.value">Cancel</button>
```

{% endcode %}

We'll place the delete button at the bottom of the page and the cancel button next to the save button.

## Create Event Handlers

The next step is to build handlers to react accordingly. We will also do that similar to the way we did with the other buttons.

{% code title="PersonJson.json.cs" %}

```csharp
void Handle(Input.CancelTrigger action)
{
    Transaction.Rollback();
}

void Handle(Input.DeleteAllTrigger action)
{
    Db.SQL("DELETE FROM Expense WHERE Spender = ?", this.Data);
    this.Expenses.Clear();
}
```

{% endcode %}

`Transaction.Rollback()` simply rolls back the state of your application to where you last ran a `Transaction.Commit()`.

The `DeleteAllTrigger` handler deletes all the expenses for the current `Person` in the database and clears the `Expenses` property in the view-model

## Result

You can now run your application again and rollback any mistakes you make or delete all expenses.

![](/files/-LADqge-DW0tcLAXNSpD)

If you get any errors, you can check your code against the [source code](https://github.com/Starcounter/HelloWorld/commit/e8424d4129d79379154281174cd31ad236bd8e22).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.starcounter.io/2.3.2/hello-world-tutorial/cancel-and-delete.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
