How do I add a 'Remove' button to a repeater item

Ask the community
,
1

Hi there,

I need assistance with this, i’ve looked everywhere and can’t find a solution.

I have a form that allows parents to enter their child’s details (name, age, gender, what they enjoy, allergies, and any additional notes.) and upon clicking submit, the details are sent to a database and a repeater, connected to that dataset, is refreshed using

setTimeout(function() {
     $w('#dataset1').refresh();
 }, 1000);

(The timeout to allow the form to submit first.) (This snippet of code is activated upon clicking submit.)

The repeater then updates with the ‘new child’ added. However now I need to add a ‘Remove’ button in case they make a mistake or for some reason needs to remove a child from their family. I’ve added the button to the repeater item but can’t for love or money get it to work. Please help.

https://jmbabysitting45.wixsite.com/my-site/account/blank

I’ve tried

$w('#dataset1').remove();

(Doesn’t work) + a whole lot of other things that didn’t work.

2

Try using the wixData.remove API.

https://www.wix.com/velo/reference/wix-data/remove

You can get the id using

let id = $w('#dataset1').getCurrentItem()._id;

Let me know if you need any more help

3

You can look at the Input Repeaters example to see how it’s done. This example shows how to implement a Delete button for each Repeater Item, or a Global Delete button which deletes all selected Repeater items.

4

I did this, but the code in the button isn’t working at all, that’s what the titletest.hide(); is for but it isn’t hiding the title when the button is clicked, a clear indication that no code within removeItem_click is being executed when clicked.

export function removeItem_click(event) {
    titletest.hide(); //titletest is the text 'Add Child'
 let id = $w('#dataset1').getCurrentItem()._id;
    wixData.remove("#dataset1",id);
    setTimeout(function() {
     $w('#dataset1').refresh();
 }, 1000);

Did I make a mistake? Or am I doing something wrong? Thanks in advance.

5

You have a few issues with your code…

The following lines of code will not work:

var c1_Enjoy = $w("#c1likes");
var c1_Allergies = $w("#c1allergies");
var c1_Additional = $w("#c1additional");
var c1_Error = $w("#c1error");
var titletest = $w("#text21");

The $w screen elements cannot be accessed in the code file itself, they can only be accessed inside of the onReady() and other event handlers (such as onClick).
You would be better off not using variables for the screen elements, just use the $w notation. All of the Editor code element example code snippets in the API docs show how this is done.

You have two buttons (button2, and button4) that have onClick event handlers that refresh the dataset. Why? Plus, the button2 onClick() has a 1 second delay before refreshing. Again - why?

In the removeItem_click() event handler, you will need to use the Repeated Item Scope in order to determine which item in the Repeater to delete, and see Retrieve Repeater Item Data When Clicked to learn how to get to the Repeated Item’s data. The Input Repeaters example demonstrates how this is done.

6

how delete item from repeater?

7

Your question is wrong!

You do never remove items from —> REPEATER <—.
You remove items from your DATABASE and your repeater just shows the results and is connected to your DATABASE trough some kind of connecting-wire, called —> DATASET.

Feel free to open your own post with your own good described project-setup & issue, to get your answer.