Supprimer un noeud d'une liste de noeuds

Version imprimable

02/12/2023, 08h47
moimp

Supprimer un noeud d'une liste de noeuds

Bonjour,
Dans var btns = document.querySelectorAll("[type='submit']"), je voudrais enlever un nœud spécifique de préférence en fonction de son nom, sinon de son index. Je ne trouve pas comment faire.

Salut moimp,

Référencer les éléments contenant [type='submit'] et sélectionner un index ?
Code:

1 2 3 4 5 6 document.querySelectorAll("[type='submit']").forEach((elem, index) => { console.log(`Element: ${elem.nodeName}[${index}]`) console.log(elem) // if(index == 2) {...} })

02/12/2023, 15h04
moimp

C'est bien à peu près ce que je fais mais ça ne me dit pas comment supprimer l'index et je suis obligé de répéter une telle boucle partout où j'en ai besoin.
02/12/2023, 15h37
ASCIIDEFOND

Citation:

Envoyé par moimp

... ça ne me dit pas comment supprimer l'index et je suis obligé de répéter une telle boucle partout où j'en ai besoin.

Tu veux parler de la suppression d'un l'élément via son index.
Si tu connais le nombre d'éléments et lequel sélectionner, tu peux faire comme cela.

Code:

document.querySelectorAll("[type='submit']")[ici_le_numero_d_index].remove()

Code:

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
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>truc</title>
    </head>
    <body>
        <button type="submit" name="riri">Riri!</button>
        <button type="submit" name="fifi">Fifi!</button>
        <button type="submit" name="loulou">Loulou!</button>
        <br/>
        <button>Delete Fifi</button>
 
        <script>
        const deleteBtn = document.querySelector('button:last-of-type');
        
        // à partir de la liste de noeuds et de son index dans cette liste
        let submitBtn = document.querySelectorAll('button[type="submit"]');
        let nodeFoundByIndex = submitBtn.item(1);
        
        // ou directement par son attribut name sans passer par la liste
        let nodeFoundByName = document.querySelector('button[type="submit"][name="fifi"]');
        
        
        let nodeToDelete = /*nodeFoundByName; /*/nodeFoundByIndex;
        
        
        deleteBtn.addEventListener('click', () => {
            nodeToDelete.parentNode.removeChild(nodeToDelete);
            console.log(submitBtn);
        }, false);
        </script>
    </body>
</html>

remarque: le noeud enlevé reste présent dans la liste submitBtn malgré sa supression du DOM.

02/12/2023, 17h06
moimp

Finalement, j'ai trouvé une solution. J'affecte une classe aux seuls boutons qui m'intéressent et je sélectionne uniquement ceux qui ont cette classe.