How to confirm a delete action using a light box

Ask the community
, ,
1

Question:
I have a lightbox called ‘$w(’#lightBoxDeleteConfirmation’)‘, which contains two buttons: a ‘No’ button named ‘$w(’#btnNo’)’ and a ‘Yes’ button named ‘$w(’#btnYes’)'. I would like the delete action to only occur when the user clicks on the ‘Yes’ button. Specifically, when a delete button is clicked within the repeater, it should open the lightbox to confirm the deletion. If the user selects ‘Yes’, it should delete the associated item linked to the ‘Delete’ button clicked within the repeater. If the user selects ‘No’, it should simply close the lightbox.

Product:
Wix Editor

What are you trying to achieve:
I’am trying to achieve the desired behavior of confirming the delete action using the Lightbox and only deleting the contact when the user clicks “Yes” while closing the Lightbox on “No,”.

What have you already tried:
This is the code i use to delete items from the repeater and it work perfectly if added directly to the page without opening the lightbox, but i can seem to make it work using the lightbox

$w.onReady(function () {

	const myColllection = "AddContactCollection";

	$w('#listRepeater').onItemReady (($item, itemData,index) =>{
		$item('#btnDelete').onClick(() => {removeitem(itemData._id)})

	})

	const removeitem = (itemId) => {
		wixData.remove("AddContactCollection", itemId)
			.then((results) => {
				console.log(results); //see item below
			})
			.catch((err) => {
				console.log(err);
			});
	}
});

I tried calling the lightbox on the page with my knowledge of JavaScript using the following code but i keep getting errors

$w.onReady(function () {
const myCollection = “AddContactCollection”;

$w('#listRepeater').onItemReady(($item, itemData, index) => {
    const contactId = itemData._id;

    $item('#btnDelete').onClick(() => {
       
        $w('#lightBoxDeleteConfirmation').show(); 

        
        $w('#btnYes').onClick(() => {
            removeItem(contactId); // Call the removeItem function with the contact ID
            $w('#lightBoxDeleteConfirmation').hide(); 
        });

        // Handle "No" button click inside the Lightbox
        $w('#btnNo').onClick(() => {
            $w('#lightBoxDeleteConfirmation').hide(); 
        });
    });
});

const removeItem = (itemId) => {
    wixData.remove(myCollection, itemId)
        .then((results) => {
            console.log(results);
        })
        .catch((err) => {
            console.log(err);
        });
};

});

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]