发生的情况是正在提交表单,因此页面(带有其原始内容)正在刷新。您正在click通过“提交”按钮处理事件。
如果要删除元素而不提交表单,请处理表单上的submit事件,然后false从处理程序中返回:
HTML:
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
但是您根本不需要(或想要)一个表单,如果它的唯一目的是删除虚拟div,则不需要。代替:
HTML:
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
但是,设置事件处理程序的这种样式是过时的。您似乎有很好的直觉,因为您的JavaScript代码位于其自己的文件中,诸如此类。下一步是更进一步,避免使用onXYZ属性来挂接事件处理程序。相反,在您的JavaScript中,您可以使用更新的方式(大约2000年)将它们连接起来:
HTML:
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(恰好在结束