Что происходит, так это то, что форма отправляется, и поэтому страница обновляется (с ее исходным содержимым). Вы обрабатываете clickсобытие с помощью кнопки отправки.
Если вы хотите удалить элемент и не отправлять форму, submitвместо этого обработайте событие в форме и вернитесь falseиз обработчика:
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;
}
Но вам вообще не нужна (или не нужна) форма, если ее единственная цель - удалить фиктивный div. Вместо:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Однако такой стиль настройки обработчиков событий устарел. Кажется, у вас есть хорошие инстинкты в том, что ваш код JavaScript находится в отдельном файле и тому подобное. Следующий шаг - пойти дальше и избежать использования onXYZатрибутов для подключения обработчиков событий. Вместо этого в своем JavaScript вы можете подключить их более новым (около 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;
}
}
... затем вызовите pageInit();из scriptтега в самом конце вашей страницы body(непосредственно перед закрывающим </body>тегом) или изнутри window loadсобытия, хотя это происходит очень поздно в цикле загрузки страницы и поэтому обычно не подходит для подключения события обработчики (например, после загрузки всех изображений).
Обратите внимание, что мне пришлось немного обработать, чтобы справиться с различиями в браузерах. Возможно, вам понадобится функция для подключения событий, чтобы вам не приходилось каждый раз повторять эту логику. Или подумайте об использовании библиотеки, такой как jQuery , Prototype , YUI , Closure или любой из нескольких других, чтобы сгладить эти различия в браузерах для вас. Это очень важно , чтобы понять основной материал происходит, как с точки зрения фундаментальных JavaScript и основ DOM, но библиотеки имеют дело с большим количеством несоответствий, а также обеспечить много полезных утилит - как средство подключения обработчиков событий, которые рассматриваются различия браузеров. Большинство из них также предоставляют способ настройки функции (например,pageInit) для запуска, как только DOM будет готов к манипуляциям, задолго до window loadсрабатывания.