RemoveChild()

Résolu/Fermé
anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 - 12 janv. 2022 à 21:34
anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 - 12 janv. 2022 à 21:41
Bonjour, Jordane
Petite question du soir comme tout les soirs haha, en ce moment c'est tendu jte montrerai mon projet si tu veux quand il seras finni ! ;)

En fait j'ai "widget" météo sur mon site malheureusement je n'arrive pas effacer les précédentes réponses..
J'ai compris qu'il fallait surement utiliser removeChild(), mais je n'y arrive pas ..

<div id="meteoo">
                <div class="titre">
                    <h3>Météo</h3>
                    <div id="ligne"></div>
                </div>
                <div class="widget">
                    <input id="queryLoc" type="text" placeholder="ex : paris" />
                    <input id="valider" type="button" value="" onclick="buttonClickGET()" />
                </div>
                <div id="resultat">
                    <div id="icon" ><img id="wicon" src="" alt="Weather icon"></div>
                    <br>
                    <p id="zone_meteo"></p>
                </div>
            </div>


/* meteo */

#meteoo{
	position: absolute;
	display: flex;
	flex-direction: column;
	margin-left: 5vh;
	z-index: 2;
	width: 90%;
	height: 80%;
	border-radius: 10px;
	background-color: #4C5375;
	visibility: hidden;
}
.widget{
	display: flex;
	justify-content: row;
	justify-content: center;
}
#queryLoc{
	margin-top: 10vh;
	border-radius: 20px;
	-webkit-appearance: none;
	width: 25vh;
	height: 3vh;
}
#valider{
	margin-top: 8vh;
	margin-left: 8vh;
	width: 7vh;
	height: 7vh;
	border-radius: 50px;
	background-color: whitesmoke;
	box-shadow: 0px 0px 20px blue;
	cursor: pointer;
}
#valider:hover{
	box-shadow: 0px 0px 20px whitesmoke;
}
#zone_meteo{
	color: rgb(255, 255, 255);
	cursor: default;
	font-size: 8vh;
}
#wicon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25vh;
	height: 25vh;
	margin-bottom: 10vh;
}
#resultat{
	height: 10vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15vh;
}


document.getElementById("resultat").style.visibility = "hidden";
var callBackGetSuccess = function(data) {
	let element = document.getElementById('zone_meteo');
    console.log("donnees api", data)
	let queryLoc = document.getElementById("queryLoc").value;
	let newContent = document.createTextNode(queryLoc + " " + data.main.temp + " C° " + data.weather[0].main);
	element.appendChild(newContent);
	var iconcode = data.weather[0].icon;
	var iconurl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/" + iconcode + ".svg";
	$('#wicon').attr('src', iconurl);
	document.getElementById("resultat").style.visibility = "visible";
}

function buttonClickGET(){
	
	
    var queryLoc = document.getElementById("queryLoc").value;
	// api key : fe8b5facfcec5807d9bdc00e6bc4e4df

    var url = "https://api.openweathermap.org/data/2.5/weather?q="+queryLoc+"&appid=fe8b5facfcec5807d9bdc00e6bc4e4df&units=metric";
    
    $.get(url, callBackGetSuccess).done(function(){
        //alert( "second success" );
      })
      .fail(function(){
        alert( "error" );
      })
      .always(function(){
        //alert( "finished" );
      });
}


Je t'envoie tout au cas ou l'erreur ne vienne pas que du js..

Configuration: Windows / Chrome 96.0.4664.110

2 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
12 janv. 2022 à 21:38
Bonsoir,

Il suffit d'effacer le contenu avant d'en remettre
var callBackGetSuccess = function(data) {
	let element = document.getElementById('zone_meteo');
    element.innerHTML = ""; // on vide la div

    console.log("donnees api", data)
	let queryLoc = document.getElementById("queryLoc").value;
	let newContent = document.createTextNode(queryLoc + " " + data.main.temp + " C° " + data.weather[0].main);
	element.appendChild(newContent);
	var iconcode = data.weather[0].icon;
	var iconurl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/" + iconcode + ".svg";
	$('#wicon').attr('src', iconurl);
	document.getElementById("resultat").style.visibility = "visible";
}


1
anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 6
12 janv. 2022 à 21:41
Je savais que c'était pas si compliqué ....
Merci beaucoup Jordane !
0