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

Version imprimable

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:

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:

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 !

02/02/2021, 15h45
SpaceFrog

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:

<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:

divElmnt.removeChild(divElmnt.firstChild.nextSibling);

A noter que je ne vois pas trop à quoi sert le preventDefaut sur le click du div ...
02/02/2021, 18h20
javatwister

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

Code:

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

ou alors, un peu plus risqué:

Code:

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é.
02/02/2021, 18h35
NoSmoking

Bonjour,

Citation:

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:

divElmnt.removeChild(divElmnt.firstChild.nextSibling);

Pour palier à cela, je parle de la structure, il est préférable de cibler via divElmnt.firstElementChild.
02/02/2021, 20h09
javatwister

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)
03/02/2021, 14h31
Ushuango
Bonjour,

je comprends donc que les espaces ( voire tabulations et autres ) sont des textNodes 8O!!!
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 :mouarf:). 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:

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 ?
03/02/2021, 15h57
javatwister

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

Code:

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

03/02/2021, 17h06
Ushuango

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 !
03/02/2021, 18h15
NoSmoking
Perso, j’utilise :
Code:

1 2 3 while (elem.firstChild) { elem.firstChild.remove(); }
ceci étant, il existe plusieurs façons de « nettoyer » un élément
Code:

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 !

Citation:

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é.

Citation:

Le navigateur n'interprète pas les textNodes !

Si il les interprète à preuve
Code:

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:

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:

1 2 3 4 <ul> <li>Item #1</li> <li>Item #2</li> </ul>
ne sera pas rendu comme
Code:

1 2 3 <ul> <li>Item #1</li><li>Item #2</li> </ul>
04/02/2021, 08h36
SpaceFrog

Citation:

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

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

Citation:

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 ....
04/02/2021, 10h52
Ushuango
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:

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

pour
Code:

1 2 3 4 <div> <h1>Bonjour</h1> </div>
et le mêm résultat pour
Code:

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.

Citation:

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:

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;

05/02/2021, 09h42
NoSmoking
Citation:

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
Citation:
et le mêm résultat pour

Code:

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:

1 2 3 <div> <h1>Bonjour</h1> </div> // ^ ^ // espace espace
08/02/2021, 13h23
Ushuango

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 !!!