Supprimer des éléments svg du dom

**nthl.roche** · 26/03/2017, 20h13

Bonjour

Dans le code suivant :
https://jsfiddle.net/wm2oh6fx/1/

je veux que l'utilisateur puisse augmenter ou diminuer le nombre de disques.
je supprime les précédents avant d'en créer de nouveaux.

Lorsque je descends le nombre de disques, il y a parfois des "ratés" (des disques qui ne se suppriment pas).
Quelle peut être la raison ?

merci d'avance de toute aide.

**NoSmoking** · 26/03/2017, 21h06

Bonjour,
la méthode getElementsByTagNameNS retourne une nodeList qui est une liste des noeuds « vivante»ce qui signifie que lorsque tu supprimes un élément auquel elle fait référence cette liste est mise à jour et sa longueur change.

Tu peux remplacer ta boucle par celle-ci

Code :

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

1
2
3
while(disques[0]){
    disques[0].parentNode.removeChild(disques[0])
}

**nthl.roche** · 26/03/2017, 21h55

merci bien.

Si j'ai bien compris, une boucle descendante devrait être bonne aussi ?

Code :

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

1
2
3
4
5
6
 
let lg = disques.length;
for(let k = lg-1 ; k  >= 0; k -= 1){
	let disque = disques[k];
	disque.parentNode.removeChild(disque);
}

**danielhagnoul** · 26/03/2017, 22h26

Envoyé par nthl.roche

[...] Lorsque je descends le nombre de disques, il y a parfois des "ratés" (des disques qui ne se suppriment pas). [...]

C'est plus fluide en travaillant sur l'événement input.

Mon code de test :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    label {
      display: block;
    }
  </style>
  <script>
    'use strict';
    
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      const
        nbdisquesinput = document.querySelector( "#nbdisques" ),
        angleinput = document.querySelector( "#angle" ),
        zoneFig = document.querySelector( "#zoneFig" ),
        svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ),
        Ax = 10,
        Ay = 10,
        Bx = 10,
        By = 40,
        rayon = 20,
        centrex = 10 + Math.sqrt( 175 ),
        centrey = 25;
        
      svg.setAttribute( "width", 800 +'px' );
      svg.setAttribute( "height", 300 +'px' );
      svg.setAttribute( "viewBox", "0 0 800 300" );
      
      zoneFig.appendChild( svg );
      
      function disque( angle, nb ){
        const
          disques = document.getElementsByTagNameNS( "http://www.w3.org/2000/svg", "path" );
          
        let disquetronque;
        
        for( let disque of Array.from( disques ) ){
          disque.parentNode.removeChild( disque );
        }
        
        for( let k = 0; k < nb; k++ ){
          disquetronque = document.createElementNS( "http://www.w3.org/2000/svg", "path" );
          
          disquetronque.setAttribute( "d", 'M' + Ax + ' ' + Ay + 'A' + rayon + ' ' + rayon + ' 0 1 1 ' +  Bx  + ' ' + By + ' ' +'Z' );
          disquetronque.setAttribute( "style", "stroke:orange;fill:yellow;stroke-width:3px;" );
          disquetronque.setAttribute( 'transform', "translate(" + ( k * 2.5 * rayon ) + "," + "0) rotate(" + ( k * angle ) + "," + centrex + "," + centrey +")" );
          
          svg.appendChild( disquetronque );
        }
      }
      
      nbdisquesinput.addEventListener( 'input', () => {
        disque( angleinput.value, nbdisquesinput.value )
      }, false );
      
      angleinput.addEventListener( 'input', () => {
        disque( angleinput.value, nbdisquesinput.value )
      }, false );
      
    }, false );
  </script>
</head>
<body>
  <main>
 
    <label for="nbdisques">
      Entrez le nombre de disques : <input type="number" value="4" step="1" min="1" max="15" id="nbdisques">
    </label>
    <label for="angle">
      Entrez l'angle de rotation : <input type="number" value="15" step="5" min="5" max="355" id="angle">
    </label>
    <div id="zoneFig"></div>
 
  </main>
</body>
</html>

Supprimer des éléments svg du dom

JavaScript

Vue hybride

Discussions similaires

Partager

Partager