Listes imbriquées DOM

Version imprimable

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <ul id="liste"> <li>Titre x <ul class="sous-titre"> <li>Sous-Titres 1 x</li> <li>Sous-Titres 2 x</li> <li>Sous-Titres 3 x</li> </ul> </li> <li>Titre x</li> <li>Titre x <ul class="sous-titre"> <li>Sous-Titres 4 x</li> <li>Sous-Titres 5 x</li> </ul> </li> </ul>
Pour la partie JavaScript voici mais deux fonctions :

suppr()
Code:

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

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

Bonjour,

Code:

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:

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:

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
  })
});

09/10/2021, 20h29
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