Récupérer l'id pour supprimer l'enregistrement en bdd

J'ai trouvé !

Par rapport à mon post #2 j'ai modifié plusieurs choses : 

1. Plutôt que de cibler l'éventuel clic sur le <i> je cible au dessus : la DIV id='taches'
    (Je surveille ainsi toutes les poubelles).
2. La ligne 4 de mon Javascript post #2 n'était pas complète, il manquait l'info qui permettait de cibler le <i>.
    Comme je n'arrivait à rien avec la class = 'fa fa-trash alerte',  j'ai ajouté dans la génération PHP un id = 'trash'
3. Enfin, pour récupérer la valeur du data-attribute, j'ai utilisé this.attr

Merci Jordane pour m'avoir aiguillé vers la solution !

Le JavaScript qui fonctionne : 

// Suppression dynamique d'une tâche dans le pense-bête : 
$('#taches').each(function () {
    var $this = $(this);
    $this.on('click', '#trash', function () {
        alert($(this).attr("data-attribute"));
    });
});

LE CODE COMPLET : 
Code HTML : 
 

<article class="accueil4">
    <h1>Pense bête !</h1>
    <input class="input-formulaire" id="tache" type="text"/>
    <button id="add">
        <i class="fa fa-plus btn-ajout" alt="Ajouter un article" title="Ajouter un article"></i>
    </button>
    <div class="taches" id="taches">
    </div>
</article>

Le Javascript, sur la même page que le HTML : 
 

// GESTION DU PENSE-BÊTE :
$(document).ready(function() {
    // Chargement au démarrage du pense-bête :
    $.ajax({
        type: 'POST',
        url: 'pensebete-ajout.php',
        data: {},
        success: function(html) {
            $('#tache').val('');
            $('#taches').html(html);
        }
    });

    // Enregistrement dynamique d'une tâche dans le pense-bête : 
    $('#add').on('click', function() {
        var tache = $('#tache').val();
        if (tache != '') {
            $.ajax({
                type: 'POST',
                url: 'pensebete-ajout.php',
                data: {
                    libelle: tache
                },
                success: function(html) {
                    $('#tache').val('');
                    $('#taches').html(html);
                }
            });
        }
    });
    // Suppression dynamique d'une tâche dans le pense-bête : 
    $('#taches').each(function() {
        var $this = $(this);
        $this.on('click', '#trash', function() {
            $id = $(this).attr("data-attribute");
            if ($id != '') {
                $.ajax({
                    type: 'POST',
                    url: 'pensebete-ajout.php',
                    data: {
                        id: $id
                    },
                    success: function(html) {
                        $('#tache').val('');
                        $('#taches').html(html);
                    }
                });
            }
        });
    });
});

Code php : 

<?php

require ("connexion.php");

// Ajout d'une nouvelle tâche dans la BDD :
if (isset($_POST['libelle']) && !empty($_POST['libelle'])) {
	$libelle = $_POST['libelle'];
    //Requête préparée pour l'ajout :
    $requete1 = $bdd->prepare('INSERT INTO taches(libelle) VALUES(:libelle)');
    // Exécution de la requête :
    $requete1->execute(array(
    	'libelle' => $libelle
    ));
}

// Suppression d'une tâche dans la BDD :
if (isset($_POST['id']) && !empty($_POST['id'])) {
    $id_tache = $_POST['id'];
    //Requête préparée pour la suppression :
    $requete2 = $bdd->prepare('DELETE FROM taches WHERE id_tache = :id_tache');
    $requete2->execute(array(
        'id_tache' => $id_tache
    ));
}

// Chargement des tâches de la BDD à afficher dans le pense-bête : 
$requete3 = $bdd->query('SELECT taches.* FROM taches');
foreach($requete3 as $valeur) {
    echo $valeur['libelle'] . '<i id = "trash" data-attribute= "' . $valeur['id_tache'] . '" class="fa fa-trash alerte" aria-hidden="true"></i><br>';
}
?>

Bonjour

Utilise un data-attribute pour y stocker laidi de chaque élément au niveau de ton HTML.

Il te sera alors facile de récupérer la valeur dans ton JS.

Merci pour ton aide Jordan...

Je tourne autour de cette syntaxe mais sans résultat ! (Même en console !)
 

$requete2 = $bdd->query('SELECT taches.* FROM taches');
foreach($requete2 as $valeur) {
    echo $valeur['libelle'] . '<i data-id= "' . $valeur['id_tache'] . '" class="fa fa-trash alerte" aria-hidden="true"></i><br>';
}

// Suppression dynamique d'une tâche dans le pense-bête : 
$('.fa').each(function () {
    var $this = $(this);
    $this.on("click", function () {
        alert($(this).data('id'));
    });
});

Désolé d'avoir écorché ton prénom, pourtant ce n'est pas la première fois que je l'écris !  ;-)

Le html généré donne ça :
 

<div class="taches" id="taches">
	Lancer taxe séjour
	<i data-id="27" class="fa fa-trash alerte" aria-hidden="true"></i>
	<br>
	Modifier client 87
	<i data-id="28" class="fa fa-trash alerte" aria-hidden="true"></i>
	<br>
</div>

Il ne se passe rien non plus avec ton code, et je ne comprends pas, la console reste désespérément vide !
Est-ce que c'est possible de surveiller un clic sur un <i> </i> ?

L'alert fonctionne si je clic sur le :
<button id="add">
    <i class="fa fa-plus btn-ajout" alt="Ajouter un article" title="Ajouter un article"></i>
</button>

Du coup, je modifie  Javascript ainsi : 
$('.fa-trash').click(function() {
    let id = $(this).data('id');
    alert('id',id);
});

Mais toujours rien, même en console !