Bonjour à tous,

Dans le code ci-dessous qui marche parfaitement et qui crée dynamiquement une table avec un bouton supprimer pour chaque ligne, il m'est ensuite impossible de faire une délégation sur la liste des boutons car la table ne figure pas dans la nodeList du dom et aucun de ses éléments n'est donc disponible pour un queryselectorAll par exemple...

Sauriez-vous me dire pourquoi ?

Merci d'avance

listeCategoriesDepenses.js :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function listeCategoriesDepenses() {
 
    //On instancie XMLHttp request
    let xhr = new XMLHttpRequest()
 
    xhr.open('get', 'listeCategoriesDepenses.php')
 
    xhr.onreadystatechange = () => {
 
        if (xhr.readyState == 4 && xhr.status == 200) {
 
            //Si réponse on la convertit
            let categories = JSON.parse(xhr.response)
            //console.log(categories)
 
            //création du tableau dans la page
            const tableau = document.createElement('table')
            //Boucle sur l'objet categories JSON
            const listeCategories = categories.map((item)=> {
                //Affiche les éléments catégories en liste
                return `                 
                <tr>
                <td>${item.nomcategorie}</td> 
                <td><button class="btnSupprimerCategorie" data-idcategorie=${item.id} type="button">Effacer</button></td>             
                </tr>                   
                `
            })
            //console.log(listeCategories)
            tableau.innerHTML = `
            <thead>
            <tr><th colspan=2>Catégories Dépenses</tr></th>
            </thead>
            <tbody>${listeCategories.join(' ')}</tbody>`
 
            //Affichage du tableau            
            document.getElementById("listeCategoriesDepenses").appendChild(tableau)
 
        } else {
            //On gère les erreurs
            let erreur = xhr.response
            console.log("Erreur ! : " + erreur.message)
        }
    }
 
        //Envoi de la requête Ajax
        xhr.send()
 
}
 
listeCategoriesDepenses()
index.php :

Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
 
require_once 'ajoutcategoriedepenses.php';
require_once 'supprimercategoriedepenses.php';?>
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="stylesheet" href="/css/styles.css">
    <title>Document</title>
</head>
<body>
    <div id="listeCategoriesDepenses">
 
        <form action="" method="post">
            <label for="nomcategorie">Nom catégorie</label>
            <input type="text" name="nomcategorie" id="nomcategorie">
            <input type="submit" value="Ajouter" id="btnajoutcategorie" name="btnajoutcategorie">
        </form>
 
    </div>
    </body>
    <script type="text/javascript" src="js/listecategoriesdepenses.js"></script>
    <script type="text/javascript" src="js/supprimercategoriedepenses.js"></script>
</html>

supprimerCategorieDepense.js

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.onload = () => {
 
    const btnSupprimerCategorie = document.querySelectorAll("*")
    console.log(btnSupprimerCategorie)
 
 
    btnSupprimerCategorie.forEach((element)=>{
 
        element.addEventListener('click',(e)=>{
            //e.preventDefault()
 
 
    })
    })
 
 
    // let xhr = new XMLHttpRequest();
    // xhr.open("POST", "supprimercategoriedepenses.php");
    // xhr.onreadystatechange=(e)=>{
    //     if(xhr.readyState==4 &&xhr.status==200 ){
    //         let reponse=xhr.response
    //     }
    // }
}