In the last episode we’ve added a form to our Issues List application, so that it is possible to create new issue data. This time we’re adding another capability to our Meteor and Svelte application: deleting data.

Importing Issues Collection In Issue Component

First of all we need to also import the Issues collection in Issue.svelte, so that we’ve also access to this collection from within the Issue component in our Svelte application:

<script>
    import { Issues } from "../api/issues.js";

    ...
</script>

Adding A Delete Button To The Table Output

Next we’ll add a delete button to the row output which is generated by Issue component:

<tr>
    <td>{issue.title}</td>
    <td>{issue.description}</td>
    <td>{issue.dueDate}</td>
    <td>{issue.priority}</td>
    <td><button class='error' on:click={deleteIssue}>Delete</button></td>
</tr>

In order to handle the click event of the delete button we’re adding the deleteIssue handler function. This function is not yet implemented, thus we need to add the implementation in the next step.

#meteor #svelte #full-stack #web-development