Discussion :

[hammer87]

Bonjour,

J'ai essayé plusieurs choses, mais j'avoue que je n'y arrive pas.
J'aimerais avoir votre avis ainsi que votre aide, pour me décoincer dans mon problème.

Je m'explique ; je voudrais créer une structure comme celle-ci pour le html:

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
<ul id="liste">
  <li>Titre <span class="delete" onclick="suppr(this)">x</span>
    <ul class="sous-titre">
      <li>Sous-Titres 1 <span class="delete" onclick="suppr2(this)">x</span></li>
      <li>Sous-Titres 2 <span class="delete" onclick="suppr2(this)">x</span></li>
      <li>Sous-Titres 3 <span class="delete" onclick="suppr2(this)">x</span></li>
    </ul>
  </li>
  <li>Titre <span class="delete" onclick="suppr(this)">x</span></li>
  <li>Titre <span class="delete" onclick="suppr(this)">x</span>
    <ul class="sous-titre">
      <li>Sous-Titres 4 <span class="delete" onclick="suppr2(this)">x</span></li>
      <li>Sous-Titres 5 <span class="delete" onclick="suppr2(this)">x</span></li>
    </ul>
  </li>
</ul>

Pour la partie JavaScript voici mais deux fonctions :

suppr()

Code javascript :

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

1
2
3
4
 
function suppr(elem) {
 liste.removeChild(elem.parentNode)
}

suppr2()

Code javascript :

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

1
2
3
4
 
function suppr2(elem) {
  var sous_title = document.querySelector("#liste ul.sous-titre");
  sous_title.removeChild(elem.parentNode);

Mon problème et vous aller le comprendre, c'est que je ne peux pas supprimer les sous-titres 4 et 5 dans cette liste ; avez-vous une idée pour me décoincer ?

Vous pouvez tester tout mon code en ligne : https://jsfiddle.net/hammer87/w6pfsL3g/
Je pense que le problème vient de querySelector("#liste ul.sous-titre") sélectionne qu'un seul bloc de la classe "sous-titre", je devrais plutôt utiliser querySelectorAll("#liste ul.sous-titre") cela va tout sélectionné les blocs de la classe "sous-titre", mais je coince.

Merci à vous

[jreaux62]

Bonjour,

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
<ul id="liste">
  <li>Titre 1 <del>X</del>
    <ul class="sous-titre">
      <li>Sous-Titres 1 <del>X</del></li>
      <li>Sous-Titres 2 <del>X</del></li>
      <li>Sous-Titres 3 <del>X</del></li>
    </ul>
  </li>
  <li>Titre 2 <del>X</del></li>
  <li>Titre 3 <del>X</del>
    <ul class="sous-titre">
      <li>Sous-Titres 4 <del>X</del></li>
      <li>Sous-Titres 5 <del>X</del></li>
    </ul>
  </li>
</ul>

Code css :

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
#liste {
  list-style:none;
  display:inline-block;
}
#liste li {
  position:relative;
  width:100%;
  text-align:justify;
}
#liste li del {
  position:absolute;
  right:-20px;
  display:inline-block;
  color: red;
  font-style: italic;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
}
#liste li del:hover {
  text-decoration: line-through;
  font-weight:bold;
}

Code js :

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

1
2
3
4
5
6
var liste_del = document.querySelectorAll('#liste li > del');
liste_del.forEach( function(del){
  del.addEventListener('click', function(){
    this.parentNode.remove(); // supprime le noeud parent
  })
});

[hammer87]

Bonsoir,


Je peux que te féliciter pour ta solution ça me convient parfaitement, c'est plus propre et optimiser, au niveau du code.


Sinon j'ai trouvé la solution à ma version-là même pas (10 min)"; mais c'est encore du code à rallonge, et je ne suis pas sûre que d'autres développeurs prendrais du plaisir à le lire ; en tout cas, j'adopte ton code ;


Encore merci