Remplacer les éléments enfants

Version imprimable

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:

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:

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>

21/02/2013, 13h17
SpaceFrog

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();

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

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

21/02/2013, 15h24
SpaceFrog

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

pour retirer les enfants il faut passer par remove() sur les find('div') ..
21/02/2013, 15h38
popy67

Comme ceci : $("#presentation").find('div').remove(); ?
21/02/2013, 15h54
SpaceFrog

allez chiche essaye ...
21/02/2013, 15h56
popy67

Marche pas bref
Bye Jquery je vais faire autrement....
21/02/2013, 16h04
SpaceFrog

quelle ténacité...
ce n'est pourtant pas difficile
21/02/2013, 16h07
popy67

Citation:

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:

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

.....
22/02/2013, 08h50
SpaceFrog

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/
22/02/2013, 08h55
Bovino

Comme indiqué ici : p – paragraph