Lo que sucede es que el formulario se envía y, por lo tanto, la página se actualiza (con su contenido original). Estás manejando el clickevento en un botón de enviar.
Si desea eliminar el elemento y no enviar el formulario, maneje el submitevento en el formulario y regrese falsede su controlador:
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;
}
Pero no necesita (o desea) un formulario para eso, no si su único propósito es eliminar el div ficticio. En lugar:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Sin embargo , ese estilo de configuración de controladores de eventos es anticuado. Parece tener buenos instintos en cuanto a que su código JavaScript está en su propio archivo y tal. El siguiente paso es ir más allá y evitar el uso de onXYZatributos para conectar controladores de eventos. En cambio, en su JavaScript, puede conectarlos con la forma más nueva (alrededor del año 2000) en su lugar:
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;
}
}
... luego llame pageInit();desde una scriptetiqueta al final de su página body(justo antes de la </body>etiqueta de cierre ), o desde dentro del window loadevento, aunque eso sucede muy tarde en el ciclo de carga de la página y, por lo tanto, generalmente no es bueno para conectar el evento handlers (sucede después de que todas las imágenes se hayan cargado finalmente, por ejemplo).
Tenga en cuenta que he tenido que manipularlo para solucionar las diferencias del navegador. Probablemente querrá una función para conectar eventos para que no tenga que repetir esa lógica cada vez. O considere usar una biblioteca como jQuery , Prototype , YUI , Closure o cualquiera de varias otras para suavizar esas diferencias de navegador por usted. Es muy importante comprender las cosas subyacentes que están sucediendo, tanto en términos de los fundamentos de JavaScript como de DOM, pero las bibliotecas tratan con muchas inconsistencias y también proporcionan muchas utilidades útiles, como un medio para conectar controladores de eventos que se ocupan de diferencias del navegador. La mayoría de ellos también proporcionan una forma de configurar una función (comopageInit) para ejecutarse tan pronto como el DOM esté listo para ser manipulado, mucho antes de que se window loadactive.