Происходит то, что форма отправляется, и поэтому страница обновляется (с ее исходным содержимым). Вы обрабатываете событие 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 , Прототип , YUI , Закрытие или любой из нескольких других для сгладить эти различия браузера для вас. очень важно понимать, что происходит в основе, как с точки зрения основ JavaScript, так и основ DOM, но библиотеки имеют дело с большим количеством несоответствий, а также предоставляют множество удобных утилит & mdash; как средство подключения обработчиков событий, которые имеют дело с различиями браузера. Большинство из них также предоставляют способ настроить функцию (например, pageInit) для запуска, как только DOM будет готов к работе, задолго до того, как window load сработает.