blocks|key|551404|text|您应该能够获取该元素的父元素，然后从中删除该元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551405|function+removeElement(el)+{
el.parentNode.removeChild(el);
}|code-block|syntax|javascript|551406|更新|offset|length|style|BOLD|551407|您可以将其设置为HTMLElement上的新方法：|551408|HTMLElement.prototype.remove+=+function()+{+this.parentNode.removeChild(this);+return+this;+}|551409|然后执行el.remove()+(这也将返回元素)|CODE|551410|entityMap^0|0|0|0|2|0|0|0|4|B|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@$I|Y|J|Z|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|10|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|12|8|@$I|13|J|14|K|S]]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

You should be able to get the parent of the element, then remove the element from that

<pre><code>function removeElement(el) {
el.parentNode.removeChild(el);
}
</code></pre>

Update

You can set this as a new method on the HTMLElement:

<pre><code>HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }
</code></pre>

And then do <code>el.remove()</code> (which will also return the element)

blocks|key|551439|text|childDiv.remove();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|551440|适用于Chrome+25.0.1364.155|unstyled|551441|请注意，这在IE11或Opera+Mini中不起作用，但受所有其他浏览器支持。|551442|查看此处：reference+to+childnode-remove+on+caniuse|offset|length|551443|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#feat=childnode-remove^0|0|0|0|5|14|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code>childDiv.remove();
</code></pre>

works in Chrome 25.0.1364.155

Note that this does not work in IE11 or Opera Mini but is supported by all other browsers.

See here: <a href="https://caniuse.com/#feat=childnode-remove" rel="noreferrer">reference to childnode-remove on caniuse</a>

blocks|key|1977896|text|我想你可以做一些像这样的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1977897|var+child+=+document.getElementById(childDiv);
//var+parent+=+document.getElementById(parentDiv);
child.parentNode.removeChild(child);|code-block|syntax|javascript|1977898|有关这方面的详细信息，请参阅node.parentNode。|offset|length|1977899|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/En/DOM/Node.parentNode^0|0|0|E|F|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I think you can do something like...

<pre><code>var child = document.getElementById(childDiv);
//var parent = document.getElementById(parentDiv);
child.parentNode.removeChild(child);
</code></pre>

See <a href="https://developer.mozilla.org/En/DOM/Node.parentNode" rel="noreferrer">node.parentNode</a> for more info on that.

blocks|key|1853940|text|document.body.removeChild(child);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1853941|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>document.body.removeChild(child);
</code></pre>

blocks|key|570123|text|使用outerHTML属性删除元素|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|570124|remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));

function+remElement(obj)+{
obj.outerHTML="";
}|code-block|syntax|javascript|570125|entityMap^0|2|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Removing element using <code>outerHTML</code> property

<pre><code>remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));

function remElement(obj) {
obj.outerHTML="";
}
</code></pre>

blocks|key|1977979|text|此函数用于简单地使用id删除元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1977980|function+removeElement+(id)+{+
++document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}|code-block|syntax|javascript|1977981|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This function to simply remove an element using id:

<pre><code>function removeElement (id) { 
 document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}
</code></pre>

blocks|key|570232|text|好的，你基本上不需要知道从DOM中删除DOM元素的父元素，看看下面的代码，看看在JavaScript中删除节点元素的顺序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570233|Element+%2B+parentNode+%2B+removeChild(Element);|offset|length|style|CODE|570234|正如您所看到的，我们首先找到元素，然后使用.parentNode，然后删除作为元素的子元素，所以我们根本不需要知道父元素！|570235|现在来看真正的代码：|570236|var+navigation+=+document.getElementById('navigation');
if(navigation)+{
++navigation.parentNode.removeChild(navigation);
}|code-block|syntax|javascript|570237|或者作为一个函数|570238|function+removeNode(element)+{
++if(element)+{+//check+if+it's+not+null
++++element.parentNode.removeChild(element);
++}+
}+//call+it+like+:+removeNode(document.getElementById('navigation'));|570239|此外，jQuery还具有广泛使用的remove()函数，例如：|570240|$('#navigation').remove();|570241|此外，IE和旧浏览器中也没有原生ChildNode.remove()，但您可以对其进行polyfill填充，请查看MDN中建议的polyfill：|570242|570243|+Polyfill|blockquote|BOLD|570244|570245|在Internet+Explorer+9及更高版本中，您可以使用以下代码多填充remove()方法：|570246|570247|//from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function+(arr)+{
++arr.forEach(function+(item)+{
++++if+(item.hasOwnProperty('remove'))+{
++++++return;
++++}
++++Object.defineProperty(item,+'remove',+{
++++++configurable:+true,
++++++enumerable:+true,
++++++writable:+true,
++++++value:+function+remove()+{
++++++++this.parentNode.removeChild(this);
++++++}
++++});
++});
})([Element.prototype,+CharacterData.prototype,+DocumentType.prototype]);|570248|如果您想了解更多信息，请访问MDN上的此link。|570249|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove^0|0|0|7|A|A|N|L|0|0|0|0|0|0|0|0|G|I|0|0|1|8|0|0|0|0|0|K|4|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@$D|1N|E|1O|F|G]|$D|1P|E|1Q|F|G]|$D|1R|E|1S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1U|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1V|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1W|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1X|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|1Z|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|20|8|@$D|21|E|22|F|G]]|9|@]|A|$]]|$1|10|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|11|3|12|5|13|7|24|8|@$D|25|E|26|F|14]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|28|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|29|8|@]|9|@]|A|$]]|$1|19|3|1A|5|N|7|2A|8|@]|9|@]|A|$O|P]]|$1|1B|3|1C|5|6|7|2B|8|@]|9|@$D|2C|E|2D|1|2E]]|A|$]]|$1|1D|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]]|1E|$1F|$5|1G|1H|1I|A|$1J|1K]]]]

OK, you basically don't need to know the parent to delete a DOM element from DOM, look at the below code, see how is the order to delete a node element in JavaScript:

<code>Element</code> + <code>parentNode</code> + <code>removeChild(Element);</code>

As you see we find the element first, then using .parentNode and then remove the child which is the Element again, so we don't need to know the parent at all!

So now look the real code:

<pre><code>var navigation = document.getElementById('navigation');
if(navigation) {
 navigation.parentNode.removeChild(navigation);
}
</code></pre>

or as a function

<pre><code>function removeNode(element) {
 if(element) { //check if it's not null
 element.parentNode.removeChild(element);
 } 
} //call it like : removeNode(document.getElementById('navigation'));
</code></pre>

Also jQuery has remove() function which is widely use, like:

<pre><code>$('#navigation').remove();
</code></pre>

Also there is native <code>ChildNode.remove()</code> which is not in IE and old browsers, but you can polyfill it, look the suggested polyfill from MDN:

<blockquote>
 Polyfill 
 You can polyfill the remove() method in Internet Explorer 9 and higher
 with the following code:
</blockquote>

<pre><code>//from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
 arr.forEach(function (item) {
 if (item.hasOwnProperty('remove')) {
 return;
 }
 Object.defineProperty(item, 'remove', {
 configurable: true,
 enumerable: true,
 writable: true,
 value: function remove() {
 this.parentNode.removeChild(this);
 }
 });
 });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
</code></pre>

If you like to learn more about it, visit this <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove" rel="nofollow noreferrer">link</a> on MDN.

Is it possible to remove a dom element that has no parent other than the body tag? I know this would be easy with a framework like jquery, but I'm trying to stick to straight javascript.

Here's the code I've found to do it otherwise:

<pre><code>function removeElement(parentDiv, childDiv){
 if (childDiv == parentDiv) {
 alert("The parent div cannot be removed.");
 }
 else if (document.getElementById(childDiv)) { 
 var child = document.getElementById(childDiv);
 var parent = document.getElementById(parentDiv);
 parent.removeChild(child);
 }
 else {
 alert("Child div has already been removed or does not exist.");
 return false;
 }
} 
</code></pre>

Thanks!

Remove dom element without knowing its parent?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

是否可以删除除了body标记之外没有其他父元素的dom元素？我知道使用像jquery这样的框架会很容易，但我还是坚持使用简单的javascript。下面是我找到的代码，如果不这样做的话：function removeElement(parentDiv, childDiv){     if (childDiv == parentDiv) {          alert("The parent di

问是否在不知道其父元素的情况下删除dom元素？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在不知道其父元素的情况下删除dom元素？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在不知道其父元素的情况下删除dom元素？
EN