Dzieje się tak, że formularz jest przesyłany, a więc strona jest odświeżana (z oryginalną zawartością). Obsługujesz clickzdarzenie za pomocą przycisku przesyłania.
Jeśli chcesz usunąć element i nie przesyłać formularza, submitzamiast tego obsłuż zdarzenie w formularzu i wróć falsez modułu obsługi:
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;
}
Ale w ogóle nie potrzebujesz (ani nie chcesz) formularza do tego, nie jeśli jego jedynym celem jest usunięcie fikcyjnego div. Zamiast:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Jednak ten styl konfigurowania programów obsługi zdarzeń jest przestarzały. Wydaje się, że masz dobry instynkt, ponieważ Twój kod JavaScript znajduje się we własnym pliku i tak dalej. Następnym krokiem jest pójście dalej i uniknięcie używania onXYZatrybutów do podłączania programów obsługi zdarzeń. Zamiast tego w swoim JavaScript możesz je połączyć z nowszym (około roku 2000) sposobem:
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;
}
}
... następnie wywołaj pageInit();z scripttagu na samym końcu strony body(tuż przed </body>tagiem zamykającym ) lub z poziomu window loadzdarzenia, chociaż dzieje się to na bardzo późnym etapie cyklu ładowania strony i dlatego zwykle nie nadaje się do podłączania zdarzenia obsługi (dzieje się po załadowaniu wszystkich obrazów).
Zauważ, że musiałem włożyć trochę obsługi, aby poradzić sobie z różnicami w przeglądarkach. Prawdopodobnie będziesz potrzebować funkcji do podłączania zdarzeń, więc nie musisz za każdym razem powtarzać tej logiki. Lub rozważ użycie biblioteki, takiej jak jQuery , Prototype , YUI , Closure lub dowolnej z kilku innych, aby wygładzić te różnice między przeglądarkami. Jest to bardzo ważne , aby zrozumieć podstawowa rzeczy dzieje, zarówno pod względem podstaw JavaScript i fundamentów dom, ale biblioteki czynienia z dużo niespójności, a także dostarczają wiele narzędzi przydatnych - jak środek podpinania obsługi zdarzeń, która zajmuje się różnice w przeglądarkach. Większość z nich zapewnia również sposób konfigurowania funkcji (nppageInit) do uruchomienia, gdy tylko DOM będzie gotowy do manipulacji, na długo przed window loadpożarem.