Simple Codes to Delete Rows in Wix Database

I accidentally imported 2000 rows to a Wix collection. Sh#$t! 

How did I get them out? I confess I make mistakes quite often. Most of them can be fixed easily. But today got to be my bad day. There was no easy fix. I didn’t know any method that helps me remove 2000 rows with one click. And I didn’t forget to asked Mr. Google. He didn’t give me any thing useful either.

So here I was again trying to create my own solution. And I succeeded. 

There are three methods to delete rows in Wix database. The first method is to select the rows in Wix collection and hit the delete button. The other two methods require some coding with data query and dataset APIs. Don’t panic if you don’t have any coding experience. The coding in this case is simple. I will walk you through it. Step by step. 

Anyways let’s dive into the instruction.

1. Delete A Few Rows in Wix Database

There are two scenarios when you want to delete the rows. You want to delete only the selected rows in the collection. Or you want all the rows to disappear. 

This section focuses on the first scenario. The tricky part is to select the right rows before deleting. If you fail to do so, a lot of people will get very angry. But I have an good solution for it. My secret is to use the dataset filter.

1.1. Manual Solution

Many times you don’t make gigantic mistakes like I did. Instead, you only need to remove a few rows from your Wix collection. And you know the exact rows. So no need to over think it. Just a few clicks in Wix collection and the rows disappear.

Steps to manually delete rows

• 1. Select the rows to delete
• 2. Click “Delete” button

1.2. Corvid Solution

Judging by the length of the instruction, you can tell it is way more complex than the above method. But it doesn’t mean you cannot master it. 

This method is used for adding a deletion functionality to your site. In another words, you give your users the control of the deletion. The users decide when to hit that delete button. 

First, you set up the dataset. The dataset acts like a filter on Wix collection. It selects only the rows that match some conditions in the Settings of the dataset. 

Setup a dataset to assist the deletion

• 1. Add a dataset element to the page
• 2. Change ID Property of the dataset
• 3. Click “Settings” button
• 4. Set “Read & Write” Mode
• 5. Add Filters if need

Then you set up a delete button. This button is quite unique. Normal buttons when pressed take you to other pages, or submit forms. But this button creates a unique onClick event when someone clicks it. The activities inside the event erase the rows in the collection. 

Setup a button to trigger the deletion

• 1. Add a button element to the page
• 2. Click “Change Text” button
• 3. Type “Delete Rows” for “What does this button say?”
• 4. Add onClick event in the button property

Now you write codes inside the onClick event to delete the rows. The codes are below. 

   // Create a function to delete the current rows in the book dataset
    async function deleteAll() {
    
        // Continue the deletion until the dataset has no row
        while ( $w("#datasetBook").getCurrentItem() ) {
            await $w("#datasetBook").remove();  
        } 

    }

// Delete rows after book dataset loads any data 
    $w('#datasetBook').onReady( deleteAll );

// Refresh to load more data into dataset
    $w('#datasetBook').refresh();

*When you create your own dataset, your dataset ID property is different from mine. To make the codes work, you simply change the “datasetBook” to your dataset ID.

Also if you find the codes difficult to understand, I try to give better explanation below.

• Line 10: This is the start of the onClick event of the delete button.
• Line 14 to 21: Create a function to delete all rows in the dataset out of the Collection. It removes one row at a time until the dataset doesn’t hold any row.
• Line 24: Tell the dataset to execute the delete function once the data load is complete or ready. 
• Line 27: Tell the dataset to load more rows from the collection.

2. Delete All Rows in Wix Database

I use this method often to clean up my test data before I publish the sites. Besides that, I rarely use it. Anyways, there is a need for it. And I have a few solutions.

2.1. Dataset Solution

In the above instruction, you learn how to delete selected rows with the dataset. You can use the same setup to delete all rows in the collection. But make sure you remove all filters the dataset “Settings”. 

2.2. WixData Solution

I have been talking a lot about dataset in this tutorial. And you grow tired of it. You may want to learn a different approach. Like deleting rows without any dataset. Then you won’t be disappointed.

In this section, you learn to use Wix Data APIs to achieve the goal. You still need the delete button to trigger the codes. So the first step is to add the delete button to your page. Follow the steps below.

Setup a button to trigger the deletion

• 1. Add a button element to the page
• 2. Click “Change Text” button
• 3. Type “Delete Rows” for “What does this button say?”
• 4. Add onClick event in the button property

The next step is to use Wix Data APIs to perform the deletion. But before you can use any Wix Data API, you must import WixData library to your page. In order to do so, place the line of codes below before the onClick event function.

import wixData from 'wix-data';

Then add the codes below to the onClick event function.

// Delete maximum 1000 lines from Wix Collection
    wixData.query("book") 
        .limit(1000)        
        .find()                
        .then(                 
            function deleteAll(result) 
            {
                // remove each row
                for (let i = 0; i < result.items.length; i++)
                    wixData.remove("book", result.items[i]._id);
            }
        );

*I name my collection as “book”. Remember to replace my collection name with your collection name. So that the codes work.

I try to explain the codes better below.

• Line 8: Make Wix Data APIs available for use
• Line 14: Create a query/search on the collection
• Line 15: Limit the search result to 1000 rows
• Line 16: Execute the search
• Line 17: When the search result comes back, execute the delete all rows function
• Line 21 to 22: Remove row by row in the collection by the _id found in the search result

Conclusion

To summarize, you have three options to remove the rows from Wix Database. Manually delete the rows in Wix collection. Or use dataset APIs and data query APIs to do so. I hope you can apply them when appropriate. Let get some work done and keep the frustration away.