Remplacer les éléments enfants

**popy67** · 21/02/2013, 12h18

Bonjour tout le monde,

Petit problème avec mon code...
Je cherche via JQuery à supprimer tous les enfants de mon p#presentation , mon script effectue une requete ajax pour afficher la suite de la présentation... j'ai essayé plusieurs fonctions (html, replaceWith, empty...) sans trouver la bonne, à chaque fois le contenu retourné s'affiche en plus de celui initialement présent...
Quelqu'un aurait la solution pour moi ???

Extrait de la partie Partie JQuery :

Code :

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

1
2
3
4
5
6
7
complete : function(xhr, result)
{
	if(result != "success") return;
	var response = xhr.responseText;
	$("p#presentation").empty();
	$("p#presentation").html(response);
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
<p id="presentation" style="margin:-10px">
    <div style="font-size:25px; font-weight:bold; font-family:Verdana, Geneva, sans-serif; color:red; margin-left:10px">Titre</div><br /><br />
    <div style="float:left; width:200px; border:1px solid black">Image</div>
    <div style="float:right; width:440px; border:1px solid black; font-family:Tahoma, Geneva, sans-serif; font-size:15px">Titre de présentation <br />suite de la présentation</div>
    <br /><br /><br />
    <div style="float:left; width:440px; border:1px solid black; font-family:Tahoma, Geneva, sans-serif; font-size:15px">Image</div>
    <div style="float:right; width:200px; border:1px solid black">Ma presentation</div>
    <br clear="all" /><br />
    <div id="prochaine_page" data-id_page="2" style="font-size:15px; color:red; text-align:center">Suivant >> </div>
</p>

**SpaceFrog** · 21/02/2013, 13h17

regarde pluto du coté de load() ...

de plus le selecteur p#presenetation n'est pas bon ou totu du moien redondant
un id est unique sur la page =>$("#presentation").empty();

**popy67** · 21/02/2013, 15h17

Salut merci pour ta réponse.
Je commence a devenir fou, regarde mon code ci-dessous je t'ai tout copié, pour simplifier j'ai desactivé la requete ajax, je veux maintenant uniquement supprimer les enfants de div#presentation, j'utilise sont empty qui d'après la doc est censé faire ça (Doc)sauf que le texte "ce texte s'enlève" s'enlève bien mais les noeuds en dessous restent !!!
J'ai encore utilisé d'autres solutions notamment via les selecteurs :parent :nth-child etc rien ne marche

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<link href="css/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" media="all">
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
	{
		$("#prochaine_page").hover().css('cursor', 'pointer');
		$("#prochaine_page").live("click", function()
			{
			$("#presentation").empty();
			});
	});
 
</script>
</head>
 
<body>
 
 
  <p id="presentation" style="margin:-10px">
 
                                    Ce texte s'enlève.
 
                                    <div style="font-size:25px; font-weight:bold; font-family:Verdana, Geneva, sans-serif; color:red; margin-left:10px">Titre</div><br /><br />
                                    <div style="float:left; width:200px; border:1px solid black">Image</div>
                                    <div style="float:right; width:440px; border:1px solid black; font-family:Tahoma, Geneva, sans-serif; font-size:15px">Titre de présentation <br />suite de la présentation</div>
 
                                    <br /><br /><br />
 
                                    <div style="float:left; width:440px; border:1px solid black; font-family:Tahoma, Geneva, sans-serif; font-size:15px">Image</div>
                                    <div style="float:right; width:200px; border:1px solid black">Ma presentation</div>
 
 
                                    <br clear="all" /><br />
                                    <div id="prochaine_page" data-id_page="2" style="font-size:15px; color:red; text-align:center">Suivant >> </div>
 
 
                                    </p>
 
</body>
</html>

Je deviens fou

**SpaceFrog** · 21/02/2013, 15h24

empty vide l'element de l'integralité de son contenu

pour retirer les enfants il faut passer par remove() sur les find('div') ..

**popy67** · 21/02/2013, 15h38

Comme ceci : $("#presentation").find('div').remove(); ?

**SpaceFrog** · 21/02/2013, 15h54

allez chiche essaye ...

**popy67** · 21/02/2013, 15h56

Marche pas bref
Bye Jquery je vais faire autrement....

**SpaceFrog** · 21/02/2013, 16h04

quelle ténacité...
ce n'est pourtant pas difficile

**popy67** · 21/02/2013, 16h07

Envoyé par SpaceFrog

quelle ténacité...
ce n'est pourtant pas difficile

Mouais enfin la ca commence à un peu trop me casser la tête, peut etre que demain je trouverais ca plus simple...
En attendant, une solution peu esthétique mais voila : un name identique dans chaque div puis

Code :

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

$("div[name='pres']").hide();

.....

**SpaceFrog** · 22/02/2013, 08h50

ton souci vient principalement du fait qu'une balise p n'est pas fait pour contenir des divs ...
en conséquence jquery ne trouve pas les divs dans un balise p
il sont considérés ne pas avoir de conteneurs

cf cet exemple :
http://jsfiddle.net/33pBU/

il faut du coup les attaquer par un selecteur direct

http://jsfiddle.net/33pBU/1/

**Bovino** · 22/02/2013, 08h55

Comme indiqué ici : p – paragraph

Remplacer les éléments enfants

jQuery

Discussions similaires

Partager

Partager