Supprimer un noeud d'une liste de noeuds

**moimp** · 02/12/2023, 08h47

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.

**ASCIIDEFOND** · 02/12/2023, 10h51

Salut moimp,

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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) {...}
})

**moimp** · 02/12/2023, 15h04

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.

**ASCIIDEFOND** · 02/12/2023, 15h37

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**CosmoKnacki** · 02/12/2023, 16h33

Code html :

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
<!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.

**moimp** · 02/12/2023, 17h06

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.

Supprimer un noeud d'une liste de noeuds

JavaScript

Vue hybride

Discussions similaires

Partager

Partager