如何删除使用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); }
当我点击提交button时会发生什么，它会在很短的时间内消失，然后立即出现。 我想完全删除元素，当我点击button。
发生的事情是表单正在被提交，所以页面正在刷新（以其原始内容）。 您正在处理提交button上的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; }
但是你根本不需要（或者不需要）一个表单，而不是它的唯一目的是去除这个虚拟分隔符。 代替：
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(); 从页面body最后一个script标记（就在closures</body>标记之前），或从window load事件中，尽pipe这发生在页面加载周期的很晚 ，所以通常不适合连接事件处理程序（例如， 在所有图像最终加载之后发生）。
请注意，我必须处理一些处理浏览器差异的操作。 你可能需要一个连接事件的函数，所以你不必每次都重复这个逻辑。 或者考虑使用像jQuery ， Prototype ， YUI ， Closure或其他任何一个库来平滑浏览器差异。 了解底层的东西是非常重要的 ，无论是在JavaScript基础和DOM基础方面，但是图书馆处理很多不一致的地方，还提供了很多方便的工具 – 比如一个连接事件处理器的方法，浏览器差异。 他们中的大多数还提供了一种方法来设置一个函数（比如pageInit ），一旦DOM准备好被操作，就在window load之前就开始运行。
你应该使用inputtypes=“button”，而不是inputtypes=“提交”。
<form> <input type="button" value="Remove DUMMY" onclick="removeDummy(); "/> </form>
Checkout Mozilla开发人员中心提供基本的html和javascript资源
你的JavaScript是正确的。 您的button的type="submit" ，导致页面刷新。
它重新出现，因为您的提交button重新加载页面。 防止这种行为的最简单的方法是向onclick添加一个return false ，如下所示：
<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />
将inputtypes更改为“button”。 正如TJ和Pav所说，表格正在提交。 你的Javascript看起来是正确的，我赞扬你试试非JQuery的方式:)
这是正确的代码。 可能发生的事情是您的表单正在提交，并且您会看到新的页面（元素将再次存在的位置）。
这工作。 如果你想保持button，只要从“虚拟” div删除button。
function removeDummy() { var elem = document.getElementById('dummy'); elem.parentNode.removeChild(elem); return false; }
#dummy { min-width: 200px; min-height: 200px; max-width: 200px; max-height: 200px; background-color: #fff000; }
<div id="dummy"> <button onclick="removeDummy()">Remove</button> </div>
我仍然是一个新手，但这是一个简单而简单的方法：你可以使用outerHTML，这是整个标签，而不仅仅是一个部分：
例如： <tag id='me'>blahblahblah</tag>的innerHTML将会是blahblahblah ，而outerHTML将会是整个事物<tag id='me'>blahblahblah</tag> 。
所以，对于这个例子，如果你想删除标签，它基本上是删除它的数据，所以如果你把outerHTML改成一个空string，就像删除它。
<body> <p id="myTag">This is going to get removed...</p> <input type="button" onclick="javascript: document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it) " value="Remove Praragraph"> </body>
相反，如果你只是不显示它，你可以使用可见性，不透明度和显示属性在JS中的样式。
document.getElementById('foo').style.visibility = hidden; //or document.getElementById('foo').style.opacity = 0; //or document.getElementById('foo').style.display = none;
请注意， opacity使元素仍然显示，只是你看不到它。 此外，您可以select文字，复制，粘贴，并执行您通常可以执行的所有操作，即使它是不可见的。
Visibility更符合您的情况，但会留下与应用元素一样大的空白透明空间。
我会build议你做显示，这取决于你如何使你的网页。 基本上从您的视图中删除元素，但仍然可以在DevTools中看到它。 希望这可以帮助！
尝试在脚本中运行此代码。
document.getElementById("dummy").remove();
它会希望删除元素/button。
