Supprimer le contenu texte d'une balise parent sans toucher à celui des enfants en Jquery

**MrTitomy** · 28/06/2013, 11h52

Bien le bonjour à vous tous.

J'ai un peu honte de poser ce topic pour une chose qui me semble simple mais je bloc depuis un petit moment ...

J'explique mon cas

Code html :

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

1
2
3
4
5
6
7
<span id="resume">
    <span class="img">
         <img src="monImage.png">
    </span>
 Texte à supprimer
    <a href="#">Texte à conserver</a>
</span>

Je souhaiterais donc supprimer le texte que contient directement mon span id="resume" sans toucher au texte que pourrait contenir les balises enfants et cela en Jquery.

J'ai tripoté le DOM et manipulé le Jquery plus d'une fois et pourtant ...

J'ai beau chercher, suivre des tutos et reprendre de zéro je trouve pas la logique à adapter.

Merci d'avance

**v1cent** · 28/06/2013, 15h34

alors j'ai peu être une piste, mais j'ai pas testé

je crois que le DOM considère le texte comme un noeud enfant de type text

tu doit donc pouvoir le manipuler de cette manière :
faire une boucle sur element. childNodes, vérifier le type de noeuds, supprimer à l'aide de element.removeChild

A confirmer

PS : ça marche, j'ai testé, comme je suis de bonne humeur

Code :

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
 
<script>
	function removeText(eltPere) {
		var tabEltFils = eltPere.childNodes ;
		for(var i=0;i<tabEltFils.length;i++) {
			var eltFils = tabEltFils[i] ;
			if(eltFils.nodeType==3) {
				eltPere.removeChild(eltFils) ;
			}
		}
	}
 
	function fctOnLoad() {
		console.log("fctOnLoad");
		var eltPere = document.getElementById("resume") ;
		removeText(eltPere) ;
	}	
</script>
<body onload="fctOnLoad()">
<span id="resume">
    <span class="img">
         <img src="monImage.png">
    </span>
 Texte à supprimer
    <a href="#">Texte à conserver</a>
</span>
</body>

**Bovino** · 28/06/2013, 15h52

Si tu souhaites supprimer uniquement le texte qui n'est pas dans une balise enfant, tu peux récupérer la collection des éléments contenus, vider la balise puis lui injecter ce que tu as récupéré précédemment :

Code :

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

1
2
3
var $resume = $('#resume');
var $content = $resume.children().detach();
$resume.empty().append($content);

**SpaceFrog** · 28/06/2013, 16h16

ou avec un filtre
http://jsfiddle.net/vSWbR/

**SpaceFrog** · 28/06/2013, 16h32

oulà ... vous vous compliquez vachement le truc là !!!

**MrTitomy** · 28/06/2013, 19h12

Ah quatre façons d'aborder le problème et pourtant le même résultat. Super intéressant ! J'aime ça

Merci pour vos réponses ! Je testerais ça lundi au travail. Je vous tiens au jus.

**Barsy** · 28/06/2013, 16h12

En une ligne (mais c'est pas super beau...) :

Code :

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

$("#resume").contents().filter(function(){ return this.nodeType != 1; }).wrap("<p />").parent().text("").contents().unwrap();

Supprimer le contenu texte d'une balise parent sans toucher à celui des enfants en Jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager