Afficher un message de confirmation avant suppression en JavaScript

Dans cet exemple :

• Un bouton est créé avec un événement onclick qui appelle la fonction confirmDelete() lorsque l’utilisateur clique dessus.
• La fonction confirmDelete() affiche une boîte de dialogue avec un message de confirmation.
• Si l’utilisateur clique sur “OK”, la fonction deleteItem() est appelée pour effectuer la suppression.
• Si l’utilisateur clique sur “Annuler”, aucune action n’est entreprise, mais vous pouvez ajouter du code supplémentaire selon vos besoins.

Voici comment intégrer ces cas particuliers dans l’implémentation avec des extraits de code :

1. Suppression en masse :

function confirmDeleteAll() {
    if (confirm("Êtes-vous sûr de vouloir supprimer tous les éléments sélectionnés ?")) {
        // Logique pour supprimer tous les éléments sélectionnés
        deleteSelectedItems();
    } else {
        console.log("Suppression annulée.");
    }
}

2. Données sensibles :

function confirmSensitiveDelete() {
    var password = prompt("Veuillez saisir votre mot de passe pour confirmer la suppression :");
    if (password === "motdepasse123") {
        deleteSensitiveItem();
    } else {
        alert("Mot de passe incorrect. Suppression annulée.");
    }
}

3. Undo ou annulation :

var deletedItems = [];

function confirmAndDeleteWithUndo() {
    if (confirm("Êtes-vous sûr de vouloir supprimer cet élément ?")) {
        // Logique pour supprimer l'élément
        var deletedItem = deleteItem();
        deletedItems.push(deletedItem);
        setTimeout(function() {
            // Annuler la suppression après 5 secondes
            undoDelete(deletedItem);
        }, 5000);
    } else {
        console.log("Suppression annulée.");
    }
}

function undoDelete(deletedItem) {
    // Logique pour restaurer l'élément supprimé
    console.log("Élément restauré :", deletedItem);
}

4. Personnalisation du message de confirmation :

function confirmCustomMessage(itemId, itemName) {
    if (confirm("Êtes-vous sûr de vouloir supprimer l'élément '" + itemName + "' (ID : " + itemId + ") ?")) {
        deleteCustomItem(itemId);
    } else {
        console.log("Suppression annulée pour l'élément '" + itemName + "'.");
    }
}

5. Traitement des erreurs :

function deleteItemWithErrorHandling() {
    // Logique pour supprimer l'élément
    if (deleteItemSuccessful) {
        console.log("Élément supprimé avec succès !");
    } else {
        alert("Erreur lors de la suppression. Veuillez réessayer plus tard.");
    }
}

6. Accessibilité :

Assurez-vous d’utiliser des balises sémantiques appropriées pour le message de confirmation et que le message est correctement annoncé par un lecteur d’écran. Voici un exemple HTML simple pour la boîte de dialogue de confirmation :

<div role="dialog" aria-labelledby="confirmation-dialog-title" aria-describedby="confirmation-dialog-message">
    <h3 id="confirmation-dialog-title">Confirmation de suppression</h3>
    <p id="confirmation-dialog-message">Êtes-vous sûr de vouloir supprimer cet élément ?</p>
    <button >