Need to be able to click a delete button on a repeater and delete a collection record

Ask the community
1

Hi.

I have a page where I have a repeater bound to a dataset that is connected to a Collection.
On the repeater I have a Delete Button against each collection record item.
What I would like to do is when a user clicks the Delete button it deletes the collection record that the button is against.

I hope someone can help.

Many thanks

Mark

2

Delete Button in Wix Repeater

To delete collection records from a Wix repeater when a user clicks a button:

  1. Connect Button: Right-click the Delete Button and choose “Actions” → “Add Function.” Name it deleteCollectionItem (or a fitting name).
  2. Write Code: Paste this code in the function:

import { wixData } from 'wix-data';

export function deleteCollectionItem(event) {
  const itemId = event.target.dataset.itemId; // Assuming "itemId" holds the dataset ID
  if (confirm("Delete?")) { // Optional confirmation
    wixData.remove("yourCollectionName", itemId)
      .then(() => refreshRepeaterData()) // Refresh repeater on success
      .catch((error) => alert("Delete failed!")); // Handle errors
  }
}
  1. Connect Function: Go back to the button and under “Interactions,” click “Click” and select the deleteCollectionItem function.

Refresh Repeater Data (Optional Function):

To ensure the repeater updates after deletion, create a separate function:

export function refreshRepeaterData() {
  const repeater = $w("#yourRepeaterId");
  const collectionName = "yourCollectionName"; // Replace with your collection name
  repeater.query = wixData.query(collectionName); 
  repeater.refresh();
}

Call refreshRepeaterData within the then block of deleteCollectionItem to trigger data refresh after successful deletion.

Remember: Replace "yourCollectionName" and "yourRepeaterId" with your actual values.

The provided code snippets are written in JavaScript and assume familiarity with its syntax.

Since you’re writing the code manually Here and not in the editor, it’s crucial to double-check for any typos or syntax errors that might prevent it from working correctly.
Good luck!

3

Hi. Thanks for this.

I can’t see the “Actions” → “Add Function.” when right-clicking the Delete button.
Are you using Wix Studio? I’m using Mac.

Cheers

Mark

4

Have a read of this here. You can connect the button to the dataset