Ce qui se passe est que le formulaire de soumission, et alors que la page est en cours d'actualisation (avec son contenu d'origine). Vous êtes la manipulation de l' click événement sur un bouton de soumission.
Si vous souhaitez supprimer l'élément et de ne pas soumettre le formulaire, gérer l' submit événement sur la forme au lieu, et de revenir false à partir de votre gestionnaire de:
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 besoin (ou envie) d'un formulaire pour ça, pas si son seul but est de supprimer le mannequin div. Au lieu de cela:
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 mise en place de gestionnaires d'événements est à l'ancienne. Vous semblez avoir un bon instinct dans votre code JavaScript est dans son propre fichier, par exemple. La prochaine étape est de prendre plus loin et éviter d'utiliser des onXYZ attributs pour l'accrochage des gestionnaires d'événements. Au lieu de cela, dans votre JavaScript, vous pouvez les connecter avec la plus récente (vers l'an 2000) de façon à 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(); d'un script balise à la fin de votre page body (juste avant la clôture </body> tag), ou à partir de l' window load événement, bien que cela arrive très tard dans le cycle de chargement de la page et donc en général n'est pas bon pour l'accrochage des gestionnaires d'événements (il arrive après toutes les images ont finalement embarqué, par exemple).
Note que j'ai eu à faire quelques manipulation afin de composer avec les différences de navigateurs. Vous aurez probablement envie d'une fonction permettant de raccorder des événements de sorte que vous n'avez pas à répéter cette logique à chaque fois. Ou envisager d'utiliser une librairie comme jQuery, Prototype, YUI, de Fermetureou de plusieurs autres , pour aplanir ces différences de navigateurs pour vous. Il est très important de comprendre les sous-jacents de trucs en cours, à la fois en termes de JavaScript fondamentaux et DOM fondamentaux, mais les bibliothèques de traiter avec beaucoup d'incohérences, et également fournir beaucoup de pratique utilitaires — comme un moyen d'accrochage des gestionnaires d'événements qui traite avec les différences de navigateurs. La plupart d'entre eux fournissent également un moyen de mettre en place une fonction (comme pageInit) pour s'exécuter dès que le DOM est prêt à être manipulé, longtemps avant window load des incendies.
