我是一个新手。有人可以告诉我如何使用原始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通过“提交”按钮处理事件。
click
如果要删除元素 而不 提交表单,请submit改为处理表单上的事件,然后false从处理程序中返回:
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,则不需要。代替:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
但是 ,这种设置事件处理程序的样式是过时的。您似乎有很好的直觉,因为您的JavaScript代码位于其自己的文件中,诸如此类。下一步是更进一步,避免使用onXYZ属性来挂接事件处理程序。相反,在JavaScript中,您可以使用更新的方式(大约2000年)将它们连接起来:
onXYZ
<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>
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事件内进行调用,尽管这种调用发生在页面加载周期的 很晚 ,因此通常不适合挂接事件处理程序(例如, 在 所有图像最终加载 之后 发生)。
pageInit();
script
body
</body>
window
load
请注意,我不得不进行一些处理以应对浏览器差异。您可能需要一个用于挂接事件的函数,因此您不必每次都重复该逻辑。或者考虑使用类似jQuery,Prototype,YUI,Closure或其他几种库的库来为您平滑浏览器之间的差异。这是 非常重要的 了解底层的东西怎么回事,两者在JavaScript的基本面和DOM基本面方面,但库处理很多不一致的,同时还提供了很多方便的工具- 像挂钩事件处理程序的手段涉及浏览器差异。它们中的大多数还提供了一种设置功能的方式(例如pageInit)在DOM准备好被操纵之前立即运行,而早于window load触发。
pageInit