Meteor
Posted By Sebastian

Meteor & Svelte – Building Full-Stack Reactive Web Applications – 05: Deleting Data


Subscribe On YouTube

Episodes

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.

Implementing The Event Handler Function

Implementing the deleteIssue event handler function is done in the script block in Issue.svelte like you can see in the following listing:

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

    export let issue;

    function deleteIssue() {
        Issues.remove(issue._id); 
    };
</script>

The implementation is straight forward, only one line of code is needed within the function body. Deleting the issue is done by calling the remove method on the Issues collections and passing in the ID of the issue to be deleted as a parameter. The ID is available via issue._id.

Taking a look at the result in the browser:

10.png

A red delete button is now available for all the issue entries printed out in the table. Clicking on the delete button will remove the issue entry from the list:

20.png

At the same time Meteor makes sure that the issue is not only deleted in the client application. The issue dataset is deleted on server side (in the MongoDB database) as well.

Advertisement: Svelte.js - The Complete Guide

Build high-performance web applications with Svelte.js – a lightweight JavaScript compiler:

Svelte.js – The Complete Guide*

  • Svelte.js from scratch, with zero knowledge assumed
  • All the theory and practical applications of Svelte
  • Core concepts and advanced techniques to build Svelte applications

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.