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