O que está acontecendo é que o formulário está sendo enviado e, portanto, a página está sendo atualizada (com seu conteúdo original). Você está lidando com o clickevento em um botão de envio.
Se você deseja remover o elemento e não enviar o formulário, manipule o submitevento no formulário e retorne falsedo seu manipulador:
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;
}
Mas você não precisa (ou deseja) de um formulário para isso, não se seu único objetivo é remover a div fictícia. Em vez de:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
No entanto , esse estilo de configurar manipuladores de eventos é antiquado. Você parece ter bons instintos, pois seu código JavaScript está em seu próprio arquivo e tal. O próximo passo é ir além e evitar o uso de onXYZatributos para conectar manipuladores de eventos. Em vez disso, no seu JavaScript, você pode conectá-los da maneira mais recente (por volta do ano 2000):
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;
}
}
... chame pageInit();de uma scripttag no final da sua página body(logo antes da </body>tag de fechamento ) ou de dentro do window loadevento, embora isso aconteça muito tarde no ciclo de carregamento da página e, portanto, geralmente não seja bom para conectar um evento manipuladores (isso acontece depois que todas as imagens finalmente foram carregadas, por exemplo).
Observe que eu tive que lidar com algumas diferenças para lidar com as diferenças do navegador. Você provavelmente desejará uma função para conectar eventos, para não precisar repetir essa lógica todas as vezes. Ou considere usar uma biblioteca como jQuery , Prototype , YUI , Closure ou qualquer uma das várias outras para suavizar essas diferenças de navegador. É muito importante entender as coisas subjacentes, tanto em termos de JavaScript e DOM, mas as bibliotecas lidam com muitas inconsistências e também fornecem muitos utilitários úteis - como um meio de conectar manipuladores de eventos que lidam com diferenças do navegador. A maioria deles também fornece uma maneira de configurar uma função (comopageInit) para executar assim que o DOM estiver pronto para ser manipulado, muito antes do window loaddisparo.