我是一个新手。有人可以告诉我如何使用原始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.jsfunction removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem);}当我单击“提交”按钮时，会在很短的时间内消失，然后立即出现。单击按钮时，我想完全删除该元素。
3 回答
阿晨1998
TA贡献2037条经验 获得超6个赞
发生的情况是正在提交表单，因此页面（带有其原始内容）正在刷新。您正在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触发。
饮歌长啸
TA贡献1951条经验 获得超3个赞
您应该使用输入type =“ button”而不是输入type =“ submit”。
<form>
<input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>
检出Mozilla开发人员中心以获取基本的html和javascript资源
料青山看我应如是
TA贡献1772条经验 获得超8个赞
之所以重新出现，是因为您的提交按钮重新加载了页面。为防止这种行为的最简单的方法是将添加return false到onclick像这样：
<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />
添加回答
举报
0/150
提交
取消