Ce qui se passe, c'est que le formulaire est soumis et que la page est en cours d'actualisation (avec son contenu d'origine). Vous gérez leclick événement sur un bouton d'envoi.
Si vous souhaitez supprimer l'élément et ne pas soumettre le formulaire, gérez submitplutôt l' événement sur le formulaire et renvoyez-le falsedepuis votre gestionnaire:
HTML:
<form onsubmit="return removeDummy(); ">
<input type="submit" value="Remove DUMMY"/>
</form>
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Mais vous n'avez pas du tout besoin (ou ne voulez) pas d'un formulaire pour cela, pas si son seul but est de supprimer le div factice. Au lieu:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Cependant , ce style de configuration des gestionnaires d'événements est démodé. Vous semblez avoir un bon instinct dans la mesure où votre code JavaScript est dans son propre fichier et autres. L'étape suivante consiste à aller plus loin et à éviter d'utiliser des onXYZattributs pour connecter des gestionnaires d'événements. Au lieu de cela, dans votre JavaScript, vous pouvez les connecter avec la méthode la plus récente (vers l'an 2000) à la place:
HTML:
<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
function pageInit() {
// Hook up the "remove dummy" button
var btn = document.getElementById('btnRemoveDummy');
if (btn.addEventListener) {
// DOM2 standard
btn.addEventListener('click', removeDummy, false);
}
else if (btn.attachEvent) {
// IE (IE9 finally supports the above, though)
btn.attachEvent('onclick', removeDummy);
}
else {
// Really old or non-standard browser, try DOM0
btn.onclick = removeDummy;
}
}
... puis appelez à pageInit();partir d'une scriptbalise à la toute fin de votre page body(juste avant la </body>balise de fermeture ), ou à partir de l' window loadévénement, bien que cela se produise très tard dans le cycle de chargement de la page et ne soit donc généralement pas bon pour connecter l'événement handlers (cela se produit après que toutes les images ont finalement été chargées, par exemple).
Notez que j'ai dû faire quelques manipulations pour gérer les différences de navigateur. Vous voudrez probablement une fonction pour connecter des événements afin de ne pas avoir à répéter cette logique à chaque fois. Ou pensez à utiliser une bibliothèque telle que jQuery , Prototype , YUI , Closure ou l' une des autres pour atténuer ces différences de navigateur pour vous. Il est très important de comprendre ce qui se passe sous-jacent, à la fois en termes de principes fondamentaux de JavaScript et de fondamentaux DOM, mais les bibliothèques traitent de nombreuses incohérences et fournissent également de nombreux utilitaires pratiques - comme un moyen de connecter des gestionnaires d'événements qui traitent de différences de navigateur. La plupart d'entre eux fournissent également un moyen de configurer une fonction (commepageInit) à exécuter dès que le DOM est prêt à être manipulé, bien avant les window loadincendies.