Delete dynamic repeater

Hi, I have a button to delete the item from the collection but it is deleteing the wrong item. How do I link it to the correct repeater item that it is listed on? The delete button is the little x icon under view property.

https://pete092.wixsite.com/book-the-best/properties

Code:

import wixWindow from ‘wix-window’;

export function delete_click() {
wixWindow.openLightbox(‘DELETE’)
.then(res => {
if (res === ‘ok’)
$w(‘#dataset2’).remove();
});
}

Thanks!

2 Likes

First in your click event add:
let currentItem = $w(“#dataset2”).getCurrentItem();

That will give you the clicked item.

Hey,
Have you added the dataset to the lightbox? You can try to pass an object to the lightbox and delete the relevant record from there. Check out the second example here .

Should the issue persists, please send the site URL and the page name so that I can have a look.

Best,
Tal.

Thanks Andreas and Tal. I have tried both of your suggestions but don’t know quite how to put it all together. I tried this, but obviously wrong:

export function delete_click() {
let currentItem = $w(“#dataset2”).getCurrentItem();
wixWindow.openLightbox(‘DELETE’,currentItem)
.then(res => {
if (res === ‘ok’)
$w(‘#dataset2’).remove();
});
}

Lightbox:

export function OK_onClick() {
let currentItem = $w(“#dataset1”).getCurrentItem();
wixWindow.lightbox.close(‘ok’,currentItem);
}

URL is https://pete092.wixsite.com/book-the-best/properties and the lightbox is called ‘DELETE’.

Thank you Tal.

Hi Tal did you have a chance to look at this please?

Hi,
Firstly, I noticed that you have multiple onReady function on your Properties page. Note that you should have only one onReady function for a specific page.

As for deleting the item, I would delete it from the lightbox itself:

export function OK_onClick() {
	//getting the object that was sent from the "Properties" page
	let receivedData = wixWindow.lightbox.getContext();
	console.log(receivedData);

	if (receivedData) {
	//deleting the object from the collection
		wixData.remove("Properties", receivedData._id)
			.then((results) => {
				console.log("item was removed");
				wixWindow.lightbox.close('ok');
			})
			.catch((err) => {
				console.log("error: " + err);
				wixWindow.lightbox.close('error');
			});
	}
	else{
		console.log('item was not sent');
	}
}

Good luck,
Tal.

Thanks Tal, but still deleting the incorrect repeater item??

onclick code:

export function delete_click() {
wixWindow.openLightbox(‘DELETE’, $w(‘#dataset2’).getCurrentItem());
}

and your code on my lightbox exactly as above.

Thank you!

Hi,
The onClick function should look like this:

export function delete_click() {
	let currentItem = $w("#dataset2").getCurrentItem();
	wixWindow.openLightbox('DELETE', currentItem)
		.then(() => {
			$w("#dataset2").refresh();
		});
}

Moreover, you should connect the delete button to the relevant collection using the editor:

Have a good day,
Tal.

Thank you so much Tal that should work a treat!

I have also started putting everything under the one onReady function as you suggested. Please let me know if there is anything else on the Property (title) page or properties page that needs cleaning up. Cheers!!

Thanks Tal it works, but it doesn’t delete unless I refresh the page? The delete button normally does this if u connect to the collection?

Hey,
You should refresh the dataset after deleting the record. I’ve fixed the code above. Moreover, note that it’s recommended to put all imports statements above the functions.

Tal.

I’m sorry Tal, but still deleting the first record in the field…??? Or will it not work in preview but will in Live?

I’ve accessed your editor and noticed that you haven’t connected the button to the collection using the editor… If you still struggle with it, please save all the changes and exit the editor.

Tal.

I have connected but not linked? I have saved and exited if u don’t mind looking thank you!

Hi,
I’ve corrected the code:

Firstly, make sure that you don’t delete the $w and event variables. This way, when you use the getCurrentItem, you get the correct item:

export function delete_click(event, $w) {
	let currentItem = $w("#dataset2").getCurrentItem();
	wixWindow.openLightbox('DELETE', currentItem)
		.then((msg) => {
			if (msg === 'ok'){
				$w("#dataset2").remove();				
			}		
		});
}

Secondly, all you need in the lightbox, is sending a message whether the user clicked on the ok button or cancel button:

import wixWindow from 'wix-window';

export function OK_onClick(event, $w) {
	wixWindow.lightbox.close('ok');

}
export function Cancel_onClick(event, $w) {
	wixWindow.lightbox.close('cancel');
}

I’ve saved the changes but haven’t published them.

Have a good day,
Tal.

Legend! thank you so much, and for all your patience. This site has been a big undertaking and learning curve but Wix Code is amazing for us designers. I will clean up all the code as you have suggested too.

I am using the rich text editor on the add property and edit pages, and this works pretty well too. Hopefully on testing the client can add their properties ok and it all works ok. It is a bit tricky code.

Can I show you the site near completion so you can cast your eye over it before I submit to the client? It is a massive project once they add all their properties around the world!

Thanks again, Splatty


Hi I have a complex but simple to use website that allow users to add to the database - my problem is they sometimes add incorrect details- in an admin area and not accessable to them I wish to place a button on each row that will enable me to delete any row without having to go back into the editor - is there anyone that can help - I have been given snippets of information and ive done a ton of reading but it still doesnt work- if it is not possible then fine I except that Wix has limitations but if it will work please please can someone make it simple to understand

This is basically what i need a cross or checkbox to select to delete a row can it be done and can anyone show me how to achieve this

Hey,
I think that it will be easier for you to use repeater instead of a table for that purpose. This way, you’ll be able to use code to delete a specific record. Connecting a table row to a button will be a bit more complicated.

Tal.

Can you help me Tal

Hi,
Firstly, you should display your content using a repeater as explained here .
Afterwards, you can use the code added above (marked as Top Comment). Note that in the scenario mentioned above, you should also create a lightbox named " DELETE " with a warning to the user that he deletes an existing record. The lightbox has also two buttons- “OK” and “Cancel”. In case the user clicks OK, the record is deleted, otherwise nothing happens.

Best,
Tal.