如何使用Javascript删除HTML元素？

如何使用Javascript删除HTML元素？

发生的情况是正在提交表单，因此页面（带有其原始内容）正在刷新。您正在

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

触发。