Що відбувається, це те, що форма надсилається, і тому сторінка оновлюється (з оригінальним вмістом). Ви обробляєте 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;
}
Але вам взагалі не потрібна (або хочете) форма для цього, навіть якщо її єдиною метою є видалення манекена. Замість цього:
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 , Closing або будь-який з інших, щоб згладити ці браузерні відмінності. Це дуже важливо , щоб зрозуміти основний матеріал відбувається, як з точки зору фундаментальних JavaScript і основ DOM, але бібліотеки мають справу з великою кількістю невідповідностей, а також забезпечити багато корисних утиліт - як засіб підключення обробників подій, які розглядаються відмінності браузера. Більшість із них також надають спосіб налаштування функції (наприкладpageInit) запуститись, як тільки DOM буде готовий до маніпулювання, задовго до window loadпожеж.