supprimer une image (DOM)

Sujet résolu

24 novembre 2010 à 18:44:44

Bonjour à tous !!!
Mon problème est sur le papier tout simple

J'ai une page HTML composé de trois frames ( header.html, menu.html, acceuil.html ) + index.html .

Mon but est le suivant :

dans un premier temps créer une image que j'insère dans acceuil.html et dans un deuxième temps je
dois la supprimer.

Mon soucis c'est au moment de la suppression de l'image, je n'arrive pas à utiliser la méthode removeChild

Pour la création et la suppression c'est un formulaire dans menu.html qui effectue le boulot

menu.html

<html>
    <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> 
    <link href="./css/menu.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="css/script.js"></script>
    </head>

	<body>
	<form name = "formulaire">
	    <h3> Modification de page</h3>

	    <table>
		<tr>
		    <td>Titre à remplacer :</td>
		</tr>
		<tr>
		    <td colspan="2"><input type="text" id="champ_remplace" />
		    <input type="button" name="bouton" value = "Remplacer" onclick ="remplace()"/></td>
		</tr>
		<tr> </tr><tr> </tr><tr> </tr>
		<tr>
		    <td> <input type="button" name="Inverser les paragraphes" value = "Inverser les paragraphes" onclick="inverse()"/></td>
		</tr>

		<tr> </tr><tr> </tr><tr> </tr>

		<tr>
		    <td>Insérer une image :</td>
		</tr>

		<tr>
		    <td colspan="2"> <input type="file" id="Parcourir" value = "Parcourir..."/></td>
		</tr>

		<tr>
		    <td colspan="2"> <input type="button" name="Inserer" value = "Insérer" onclick="insere()"/> <input type="button" name="Supprimer" value = "Supprimer" onclick="supprime()"/></td>
		</tr>

	</form>
	</body>
</html>

acceuil.html

<html>
    <head>
	<meta http-equiv=Content-Type content="text/html; charset=utf-8" /> 
	<link href="css/style.css" type="text/css" rel="stylesheet" />
	
    </head>
	
    <body>
 
<div id = "Image"> </div>

    </body>
</html>

function insere() // fonction ok
{
	var retour_champ_image = parent.CadreB.document.getElementById("Parcourir").value;
	//alert(retour_champ_image);
	var image = parent.CadreC.document.createElement("img");
	image.src = retour_champ_image;
	var blabla = parent.CadreC.document.createAttribute("id");
	blabla.nodeValue = "blabla";
	parent.CadreC.document.getElementById("Image").appendChild(image);	
}

function supprime()
{
	var image = parent.CadreC.document.getElementsByTagName("img").firstChild;
	parent.CadreC.document.getElementById("Image").removeChild(image);
}

Merci d'avance pour votre aide

Golmote

24 novembre 2010 à 21:26:27

A la ligne 14 du dernier code JS, remplace ".firstChild" par "[0]", déjà.

zxcoolman

24 novembre 2010 à 22:07:25

merci de ta réponse !
Alors un petit complément de ce que je voudrais réaliser.
Avec la fonction "insere", je créer dans mon block <div></div> la balise <img></img> à laquelle je rajoute comme attribut src .

Avec la fonction supprime, je souhaiterais supprimer la <img></img> et son attribut.Donc l'image

Mais je commence à être un peux perdu avec les différents noeuds et méthodes à employer.
Merci encore de votre aide

Golmote

25 novembre 2010 à 0:53:18

Mets .getElementById("Image") entre document et getElementsByTagName("img")[0]; ligne 14.

Ca ne fonctionne toujours pas ?
Que dit la console d'erreurs (Outils -> Console d'erreurs sous Firefox) ?

zxcoolman

25 novembre 2010 à 6:31:50

Oui ça marche parfaitement. Merci !!!!
Pourrais-tu m'expliquer le fonctionnement du noeud dans ce cas la?
Je ne comprend pas pourquoi il faut rentrer dans le noeud avec comme getElementById("Image") et getElementsByTagName("img")[0] .

L'un ou l'autre devrait en théorie suffire

.
Une dernière question quelle est la différence entre [0] que tu m'as très justement conseillé de mettre et firstChild .

Merci encore pour de ta réponse !

Golmote

25 novembre 2010 à 11:18:15

En fait je l'ai surtout fait par logique. Tes lignes 9 et 15 indiquaient que l'élément avec id "Image" était le parent de l'image...

Il semblait donc plus logique de fouiller seulement l'élément d'id "Image".

La différence entre firstChild et [0] huhu... euh...
Bah firstChild, c'est pareil que childNodes[0]
Ca renvoie le premier enfant d'un noeud...

Donc ça s'utilise sur un noeud.

getElementsByTagName ne renvoie pas un noeud mais une collection de noeud, que l'on peut parcourir comme un tableau.

zxcoolman

26 novembre 2010 à 15:20:34

Merci de ta réponse et tes explications ça marche parfaitement