我是一个新手。有人可以告诉我如何使用原始 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;
}
}
...然后调用pageInit();来自script页面末尾的标签 body (就在结束 </body> 标签之前)，或来自 window 内load事件，虽然这在页面加载周期很晚发生，因此通常不利于连接事件处理程序(它发生在所有图像最终加载之后，例如).
请注意，我不得不进行一些处理来处理浏览器差异。您可能需要一个连接事件的函数，这样您就不必每次都重复该逻辑。或者考虑使用像 jQuery 这样的库, Prototype , YUI , Closure , 或 any of several others为您消除这些浏览器差异。从 JavaScript 基础知识和 DOM 基础知识的 Angular 理解底层的东西是非常重要的，但是库处理了很多不一致的地方，并且还提供了很多方便的实用程序——比如连接处理浏览器差异的事件处理程序。它们中的大多数还提供了一种方法来设置一个函数(如 pageInit )，以便在 DOM 准备好被操作时立即运行，远早于 window。 load火灾。
关于javascript - 如何使用 Javascript 删除 HTML 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5933157/