通过ID删除元素
当用标准的JavaScript去除一个元素的时候，你必须先去它的父项：
var element = document.getElementById("element-id"); element.parentNode.removeChild(element); 不得不先到父节点似乎有点奇怪，是否有这样的原因JavaScript的作品？
我知道增强本地DOMfunction并不总是最好的或最stream行的解决scheme，但是这对于现代浏览器来说工作得很好。
Element.prototype.remove = function() { this.parentElement.removeChild(this); } NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for(var i = this.length - 1; i >= 0; i--) { if(this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } }
然后你可以删除这样的元素
document.getElementById("my-element").remove();
要么
document.getElementsByClassName("my-elements").remove();
注意：此解决scheme不适用于IE 7及更低版本。 有关扩展DOM的更多信息，请阅读本文 。
跨浏览：
var element = document.getElementById("element-id"); element.outerHTML = ""; delete element;
你可以做一个removefunction，这样你就不必每次都考虑一下了：
function remove(id) { var elem = document.getElementById(id); return elem.parentNode.removeChild(elem); }
这是DOM所支持的 。 search该页面的“删除”或“删除”和removeChild是唯一一个删除节点。
DOM被组织在节点树中，每个节点都有一个值，以及一个对其子节点的引用列表。 所以element.parentNode.removeChild(element)模仿了内部发生的事情：首先你去父节点，然后删除对子节点的引用。
从DOM4开始，提供了一个辅助函数来执行相同的操作： element.remove() 。 这在87％的浏览器 （截至2016年），但不是IE 11的作品。如果您需要支持旧浏览器，您可以：
- 像问题一样 ，通过父节点删除元素，
- 修改本地DOMfunction，如Johan Dettmar的答案 ，或者
- 使用DOM4 polyfill 。
删除一个元素：
var elem = document.getElementById("yourid"); elem.parentElement.removeChild(elem);
用例如某个类名称去除所有元素：
var list = document.getElementsByClassName("yourclassname"); for(var i = list.length - 1; 0 <= i; i--) if(list[i] && list[i].parentElement) list[i].parentElement.removeChild(list[i]);
你可以使用element.remove()
ChildNode.remove()方法从它所属的树中删除对象。
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
这里是一个小提琴，展示了如何调用document.getElementById('my-id').remove()
https://jsfiddle.net/52kp584L/
**
没有必要扩展NodeList。 已经实施了。
**
使用ele.parentNode.removeChild（ele）的函数对于您创build但尚未插入HTML的元素将不起作用。 像jQuery和Prototype这样的库明智地使用类似于以下的方法来避开这个限制。
_limbo = document.createElement('div'); function deleteElement(ele){ _limbo.appendChild(ele); _limbo.removeChild(ele); }
我认为JavaScript是这样工作的，因为DOM的原创devise师将父/子和上一个/下一个导航作为比当今如此stream行的DHTML修改更高的优先级。 能够从一个<input type ='text'>中读取并通过DOM中的相对位置写入到另一个中是非常有用的，在90年代中期，整个HTML表单或交互式GUI元素的dynamic生成几乎没有闪光一些开发者的眼睛。
根据DOM级别4的规范，这是当前版本的开发，有一些新的方便的突变方法可用： append() ， prepend() ， before() ， after() ， replace()和remove() 。
http://red-team-design.com/removing-an-element-with-plain-javascript-remove-method/
据我所知，直接删除一个节点不适用于Firefox，只有Internet Explorer。 所以，为了支持Firefox，你必须去父母去删除它的孩子。
参考： http : //chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/
这一个实际上来自FireFox …一次，IE是领先的，并允许直接删除一个元素。
这只是我的假设，但我相信你必须通过父母删除一个孩子的原因是由于FireFox处理引用的方式的问题。
如果你直接调用一个对象来实现hari-kari，那么在它死后，你仍然持有这个引用。 这有可能造成一些令人讨厌的错误，例如未能将其删除，将其删除，但保留对其有效的引用，或只是内存泄漏。
我相信，当他们意识到这个问题的时候，解决的办法就是通过它的父类去除一个元素，因为当这个元素不存在的时候，你现在只是持有一个对父元素的引用。 这将阻止所有不愉快的事情，并且（例如，如果按节点closures树节点）将会“很好地压缩”。
它应该是一个容易修复的错误，但是与networking编程中的其他许多事情一样，这个版本可能会被冲击，导致这个…当下一个版本出现的时候，有足够多的人使用它，改变它会导致打破了一堆代码。
所有这一切都只是我的猜测。
不过，我期待着networking编程终于得到全面清理的那一天，所有这些奇怪的小特质都清理干净了，每个人都开始按照相同的规则玩。
可能是我机器人仆人起诉我欠工资的那一天。
不得不先到父节点似乎有点奇怪，是否有这样的原因JavaScript的作品？
恕我直言：其原因与我在其他环境中看到的一样：您正在根据您的“链接”执行某项操作。 链接到它时，不能删除它。
就像砍伐树枝一样。 在切割时坐在离树最近的一侧，否则结果将是……不幸的（虽然很有趣）。
// http://javascript.crockford.com/memory/leak.html // cleans dom element to prevent memory leaks function domPurge(d) { var a = d.attributes, i, l, n; if (a) { for (i = a.length - 1; i >= 0; i -= 1) { n = a[i].name; if (typeof d[n] === 'function') { d[n] = null; } } } a = d.childNodes; if (a) { l = a.length; for (i = 0; i < l; i += 1) { domPurge(d.childNodes[i]); } } } function domRemove(id) { var elem = document.getElementById(id); domPurge(elem); return elem.parentNode.removeChild(elem); }
这是删除没有脚本错误的元素的最佳function：
function Remove(EId) { return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false; }
注意到EObj=document.getElementById(EId) 。
这是一个等号不== 。
如果元素EId存在，则函数将其删除，否则返回false，而不是error 。
你可能想要尝试下面的代码：
<body> <div> <p id="one">The 1st line.</p> <p id="two">The 2nd line.</p> <p id="three">The 3rd line.</p> <button>Remove the 3rd line.</button> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { $("#three").remove(); }); }); </script> </body>
有关详细信息，请参阅http://api.jquery.com/remove/ 。
