Supprimer un élément enfant: je dois cliquer deux fois !

**Ushuango** · 02/02/2021, 15h38

bonjour,

je souhaite apprendre à utiliser removeChild dans un block sur un élément enfant de ce bloc, au clic.
Mais comme écrit dans le titre, il faut que je clique deux fois pour que ça fonctionne !!

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div> 
            <h1>Bonjour</h1>
        </div>
    </body>
    <script src="lescript.js"></script>
</html>

je fais

Code js :

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

1
2
3
4
5
let divElmnt = document.querySelector('div');
divElmnt.addEventListener('click', (e) => {
    e.preventDefault();
    divElmnt.removeChild(divElmnt.firstChild);
});

Je ne vois pas où est l'erreur ! je dois cliquer deux fois !

**SpaceFrog** · 02/02/2021, 15h45

Rien d'étonnant le h1 n'est pas le firstChild ...

cela produirait le résultat attendu si tu syntaxais ton html de la sorte:

Code :

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

 <div><h1>Bonjour</h1></div>

Sinon tu te retrouves avec un textnode vide avant le <h1>

Si tu es sur que le h1 est juste après ton textNode tu peux faire :

Code :

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

divElmnt.removeChild(divElmnt.firstChild.nextSibling);

A noter que je ne vois pas trop à quoi sert le preventDefaut sur le click du div ...

**javatwister** · 02/02/2021, 18h20

Si tu veux effacer le 1er élément du div, tu peux faire ça, sans risque:

Code javascript :

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

e.currentTarget.querySelector("*").remove();

ou alors, un peu plus risqué:

Code javascript :

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

e.target.firstChild.remove()

parce que en cliquant sur l'élément <div>, tu cliques sur le texte de son enfant <h1>;

e.target désigne donc <h1>; et c'est bien le noeud texte "Bonjour" qui va être effacé.

**NoSmoking** · 02/02/2021, 18h35

Bonjour,

Envoyé par SpaceFrog

Sinon tu te retrouves avec un textnode vide avant le <h1>

Si tu es sur que le h1 est juste après ton textNode tu peux faire :

Code :

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

divElmnt.removeChild(divElmnt.firstChild.nextSibling);

Pour palier à cela, je parle de la structure, il est préférable de cibler via divElmnt.firstElementChild.

**javatwister** · 02/02/2021, 20h09

et même e.target.remove() si on n'est pas adepte de Microsoft; (ce qui supprime vraiment la balise, pas seulement son contenu, mea culpa)

**Ushuango** · 03/02/2021, 14h31

Bonjour,

je comprends donc que les espaces ( voire tabulations et autres ) sont des textNodes

!!!
Autant, je comprends ce qu'est la classe element: quelque chose de concret .

Mais Node ?? c'est assez abstrait pour moi , même si je me dis que c'est parent de element (ça englobe tout ).

Par-contre, on peut faire avec un textNode ( un espace dans mon html ) la même chose qu'avec un élément. Du genrre mettre un texte à la place.
(j'ai essayé des trucs, ça marche

). l'intérêt des textNodes pour le DOM ?

Du coup, s'il y a plusieurs éléments dans mon div ( un paragraphe en plus...) et que je souhaite supprimer tout ce qu'il y a dedans je fais:

Code javascript :

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

1
2
3
4
5
6
7
 
let elmnt = document.querySelector('div');
elmnt.addEventListener('click', () => {
    while (elmnt.firstElementChild) {
        elmnt.removeChild(elmnt.firstElementChild);
    }
})

Mais , il reste les "textNodes" à l'intérieur, c'est considéré comme vide dans une page HTML ?

**javatwister** · 03/02/2021, 15h57

Non, dans ce cas tu fais appel à elem.firstChild (tout court)

**SpaceFrog** · 03/02/2021, 16h06

Code :

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

1
2
3
4
5
6
7
let elmnt = document.querySelector('div');
elmnt.addEventListener('click', () => {
    while (elmnt.childNodes.length>0) {
        elmnt.removeChild(elmnt.childNodes[0]);
    }
    alert( elmnt.childNodes.length )
})

**Ushuango** · 03/02/2021, 17h06

Donc, vous partez du principe qu'il faut tout enlever !

Je voulais dire en fait:
est-ce que ç'est utile de TOUT vider, y compris les textNodes ?

Car mon script fonctionne: lorsque j'inspecte les éléments, je vois une balise div vide dans mon code html (si on met de côté les textNodes: l'espace qui reste )
et à l'écran, la page est vide !! Ça pose un problème s'il reste des textNodes ?

Le navigateur n'interprète pas les textNodes !

**NoSmoking** · 03/02/2021, 18h15

Perso, j’utilise :

Code :

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

1
2
3
while (elem.firstChild) {
  elem.firstChild.remove();
}

ceci étant, il existe plusieurs façons de « nettoyer » un élément

Code :

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

1
2
elem.textContent = "";
elem.innerHTML = "";

il y a eu une discussion la dessus où, si mes souvenirs sont bons, Watilin avait fait un exposé brillant, comme d'habitude !

est-ce que ç'est utile de TOUT vider, y compris les textNodes ?

Qui peut le plus eu le moins, tu te retrouve avec un élément purgé.

Le navigateur n'interprète pas les textNodes !

Si il les interprète à preuve

Code html :

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

1
2
3
4
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
</p>

aura le même rendu que

Code html :

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

1
2
3
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
</p>

et pourtant il y à un retour chariot et pas d'espace entre le point et la première lettre de la deuxième ligne dans le 1st cas.

En contrepartie cela est à l'origine des « whitespace » qui pourrissent bien souvent la vie

Code html :

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

1
2
3
4
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
</ul>

ne sera pas rendu comme

Code html :

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

1
2
3
<ul>
  <li>Item #1</li><li>Item #2</li>
</ul>

**SpaceFrog** · 04/02/2021, 08h36

Donc, vous partez du principe qu'il faut tout enlever !

Pas forcément, je m'en référais à

Mais , il reste les "textNodes" à l'intérieur,

J'en ai donc déduit qu'ils te gênaient

Tout dépend de ton besoin ....

**Ushuango** · 04/02/2021, 10h52

Je me suis trompé sur les textNodes: ce que je voulais dire, c'est que si je veux ensuite ajouter une balise,
ça ne vas pas perturber beaucoup l'affichage dans le html, en dehors d'éventuels whitespaces pour des listes.

Je serai intéressé par les discussions sur le sujet ( nettoyer les éléments ) et l'exposé de Watlin
Je vais tenter de retrouver, histoire de savoir quelles seraient les "bonnes" méthodes !

Cela dit, j'en ai déjà un petit paquet

Petites précisions, un elemnt.childNodes me renvoit

Code :

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

NodeList(5) [ #text, h1, #text ]

pour

Code html :

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

1
2
3
4
 
<div>
      <h1>Bonjour</h1>
</div>

et le mêm résultat pour

Code html :

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

1
2
 
<div> <h1>Bonjour</h1> </div>

Pas de différences avec un retour charriot et des tabulations ??? Du coup, par quoi est généré un textNode ?

Pour revenir à mon problème (question du post): la première fois que je clique, je supprime le texNode, puis la deuxième fois ( c'est la bonne ) le h1.

**javatwister** · 04/02/2021, 12h00

Envoyé par Ushuango

Pour revenir à mon problème : la première fois que je clique, je supprime le texNode, puis la deuxième fois ( c'est la bonne ) le h1.

Certes, mais là, c'est comme si on n'avait rien dit depuis 48 heures!

cible uniquement ton h1 et voilà!

récapitulitation:

Code javascript :

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
//Tout cela supprime la balise h1 et son contenu;
 
//document.querySelector("div").addEventListener('click', (e) => e.currentTarget.children[0].remove())
//document.querySelector("div").addEventListener('click', (e) => e.currentTarget.lastElementChild.remove())
//document.querySelector("div").addEventListener('click', (e) => e.currentTarget.firstElementChild.remove())
//document.querySelector("div").addEventListener('click', (e) => e.currentTarget.querySelector("*").remove()
 
 
//Tout cela vide totalement la balise div;
 
//document.querySelector("div").addEventListener('click', (e) => {while(e.currentTarget.lastChild){e.currentTarget.lastChild.remove()}})
//document.querySelector("div").addEventListener('click', (e) => {while(e.currentTarget.firstChild){e.currentTarget.firstChild.remove()}})
//document.querySelector("div").addEventListener('click', (e) => e.currentTarget.innerHTML="")
 
 
//Et si tu as plusieurs éléments à enlever, ceci supprime toutes les balises et leur contenu dans div, 
//en laissant les noeuds texte et les noeuds vides;
 
//document.querySelector("div").addEventListener('click', (e) => {while(e.currentTarget.children[0]){e.currentTarget.children[0].remove()}})
 
 
// Mais tu peux aussi supprimer tous les noeuds texte et les noeuds vides en laissant les balises intactes;
/*document.querySelector("div").addEventListener('click', (e) => {
	const d=e.currentTarget.childNodes;
	for(let i=0;i<d.length;i++){
		if(d[i].nodeType!=1){d[i].remove()}
	}
})*/

Teste au fur et à mesure, en n'hésitant pas à ajouter des éléments dans ton div;

**NoSmoking** · 05/02/2021, 09h42

Envoyé par Ushuango

Je serai intéressé par les discussions sur le sujet ( nettoyer les éléments )

J'ai retrouvé rapidement cette discussion : Utilisation de innerHTML

et le mêm résultat pour

Code html :

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

1
2
 
<div> <h1>Bonjour</h1> </div>

Pas de différences avec un retour charriot et des tabulations ??? Du coup, par quoi est généré un textNode ?

Il y a deux espaces qui trainent entre les balises d'où des #text !

Code html :

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

1
2
3
<div> <h1>Bonjour</h1> </div>
//   ^                ^
// espace           espace

**Ushuango** · 08/02/2021, 13h23

Je voulais dire en fait, dans le premier cas , il y a un saut de ligne ET une tabulation, dans l'autre seulement un espace !

Si j'avais 15 espaces, 50 sauts de ligne entre deux <li> , il y aurait création aussi de textNode qui contient tout "ça" .
( je me pose justement la question de savoir s'il contient vraiment tout ça, j'imagine que oui )
Mais au final , il n'y aura qu'un seul withespace: on ne tient pas compte de la "quantité" qu'il y a à l'intérieur , contrairement à un vrai texte.

Sur ce, merci à tous pour toutes ces nouvelles connaissances! Je m'en vais lire tous les liens collectés ( en cascade ).
Je m'attaque à "comment fonctionne les navigateurs" de la discussion innerHTML !!!

Supprimer un élément enfant: je dois cliquer deux fois !

JavaScript

Discussions similaires

Partager

Partager