如何使用 Javascript 删除 HTML 元素?
我完全是个新手。有人能告诉我如何使用原始 Javascript(而不是 jQuery)删除 HTML 元素吗?
index.html
<html>
<head>
<script type="text/javascript" src="myscripts.js" > </script>
<style>
#dummy {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
background-color: #fff000;
}
</style>
</head>
<body>
<div id="dummy"></div>
<form>
<input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>
</body>
myscripts.js
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
}
当我单击提交按钮时,它会消失很短的时间,然后立即出现。我想在单击按钮时完全删除该元素。
现在的情况是表单正在提交,因此页面正在刷新(包含其原始内容)。您正在处理提交按钮上的
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;
}
}
...然后从页面
body
最末尾的
script
标记(就在结束
</body>
标记之前)调用
pageInit();
,或者从
window
load
事件中调用,尽管这在页面加载周期的
非常晚
发生,因此通常不适合连接事件处理程序(例如,它发生在
所有图像最终加载完毕之后
)。
请注意,我必须进行一些处理来应对浏览器差异。您可能需要一个函数来连接事件,这样您就不必每次都重复该逻辑。或者考虑使用
jQuery
、
Prototype
、
YUI
、
Closure
或
其他任意一个
库来为您消除这些浏览器差异。了解底层发生的事情
非常重要
,无论是 JavaScript 基础知识还是 DOM 基础知识,但库处理了很多不一致的问题,也提供了很多方便的实用程序——比如连接事件处理程序以处理浏览器差异的方法。它们中的大多数还提供了一种方法来设置一个函数(如
pageInit
),该函数在 DOM 准备好被操作时立即运行,远在
window
load
触发之前。
您应该使用 input type="button" 而不是 input type="submit"。
<form>
<input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>
查看 Mozilla 开发者中心 获取基本的 html 和 javascript 资源