blocks|key|1513241|text|与库无关的方法是在删除元素之前插入要删除的元素的所有子节点(这会隐式地将它们从原来的位置删除)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1513242|while+(nodeToBeRemoved.firstChild)
{
++++nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,
++++++++++++++++++++++++++++++++++++++++++++nodeToBeRemoved);
}

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);|code-block|syntax|javascript|1513243|这将以正确的顺序将所有子节点移动到正确的位置。|1513244|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The library-independent method is to insert all child nodes of the element to be removed before itself (which implicitly removes them from their old position), before you remove it:</p>

<pre><code>while (nodeToBeRemoved.firstChild)
{
    nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,
                                            nodeToBeRemoved);
}

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);
</code></pre>

<p>This will move all child nodes to the correct place in the right order.</p>


blocks|key|1513347|text|您应该确保使用DOM，而不是innerHTML+(如果使用jk提供的jQuery解决方案，请确保它在内部移动DOM节点，而不是使用innerHTML+)，以便保留事件处理程序等内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1513348|我的答案很像insin的，但在大型结构中表现更好(单独附加每个节点可能会增加重绘的负担，因为必须为每个appendChild重新应用CSS；对于DocumentFragment，这只发生一次，因为它只有在其所有子节点都附加并添加到文档中之后才可见)。|1513349|var+fragment+=+document.createDocumentFragment();
while(element.firstChild)+{
++++fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment,+element);|code-block|syntax|javascript|1513350|entityMap^0|E|9|1T|9|0|1F|B|20|G|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>You should make sure to do this with the DOM, not <code>innerHTML</code> (and if using the jQuery solution provided by jk, make sure that it moves the DOM nodes rather than using <code>innerHTML</code> internally), in order to preserve things like event handlers.</p>

<p>My answer is a lot like insin's, but will perform better for large structures (appending each node separately can be taxing on redraws where CSS has to be reapplied for each <code>appendChild</code>; with a <code>DocumentFragment</code>, this only occurs once as it is not made visible until after its children are all appended and it is added to the document).</p>

<pre><code>var fragment = document.createDocumentFragment();
while(element.firstChild) {
    fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment, element);
</code></pre>


blocks|key|1728539|text|既然您也尝试过mootools，下面是mootools中的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1728540|var+children+=+$('remove-just-this').getChildren();
children.replaces($('remove-just-this');|code-block|syntax|javascript|1728541|请注意，这是完全未经测试的，但我以前使用过mootools，它应该可以工作。|1728542|http://mootools.net/docs/Element/Element#Element:getChildren|offset|length|1728543|http://mootools.net/docs/Element/Element#Element:replaces|1728544|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|1O|0|0|0|1L|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$K|14|L|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|J]]|V|$5|R|S|T|A|$U|N]]]]

<p>And, since you tried in mootools as well, here's the solution in mootools.</p>

<pre><code>var children = $('remove-just-this').getChildren();
children.replaces($('remove-just-this');
</code></pre>

<p>Note that's totally untested, but I have worked with mootools before and it should work.</p>

<p><a href="http://mootools.net/docs/Element/Element#Element:getChildren" rel="nofollow noreferrer">http://mootools.net/docs/Element/Element#Element:getChildren</a></p>

<p><a href="http://mootools.net/docs/Element/Element#Element:replaces" rel="nofollow noreferrer">http://mootools.net/docs/Element/Element#Element:replaces</a></p>


blocks|key|1513423|text|+$('.remove-just-this+>+*').unwrap()|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1513424|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> $('.remove-just-this &gt; *').unwrap()
</code></pre>


blocks|key|1728602|text|如果你想穿着睡衣做同样的事情，这是怎么做的。它的效果很好(感谢你的眼皮)。多亏了这一点，我已经能够制作一个合适的富文本编辑器，它可以正确地处理样式，而不会搞砸。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1728603|def+remove_node(doc,+element):
++++"""+removes+a+specific+node,+adding+its+children+in+its+place
++++"""
++++fragment+=+doc.createDocumentFragment()
++++while+element.firstChild:
++++++++fragment.appendChild(element.firstChild)

++++parent+=+element.parentNode
++++parent.insertBefore(fragment,+element)
++++parent.removeChild(element)|code-block|syntax|javascript|1728604|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|$]]

<p>if you'd like to do this same thing in pyjamas, here's how it's done.  it works great (thank you to eyelidness).  i've been able to make a proper rich text editor which properly does styles without messing up, thanks to this.</p>

<pre><code>def remove_node(doc, element):
    """ removes a specific node, adding its children in its place
    """
    fragment = doc.createDocumentFragment()
    while element.firstChild:
        fragment.appendChild(element.firstChild)

    parent = element.parentNode
    parent.insertBefore(fragment, element)
    parent.removeChild(element)
</code></pre>


blocks|key|1513501|text|更优雅的方式是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1513502|$('.remove-just-this').contents().unwrap();|code-block|syntax|javascript|1513503|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|$]]

<p>More elegant way is</p>

<pre><code>$('.remove-just-this').contents().unwrap();
</code></pre>


blocks|key|1728718|text|如果您正在处理多个行，就像在我的用例中一样，您可能会更好地使用以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1728719|+$(".card_row").each(function(){
++++++++var+cnt+=+$(this).contents();
++++++++$(this).replaceWith(cnt);
++++});|code-block|syntax|javascript|1728720|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|$]]

<p>If you are dealing with multiple rows, as it was in my use case you are probably better off with something along these lines:</p>

<pre><code> $(".card_row").each(function(){
        var cnt = $(this).contents();
        $(this).replaceWith(cnt);
    });
</code></pre>


blocks|key|1513615|text|使用现代JS！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1513616|const+node+=+document.getElementsByClassName('.remove-just-this')[0];
node.replaceWith(...node.childNodes);+//+or+node.children,+if+you+don't+want+textNodes|code-block|syntax|javascript|1513617|oldNode.replaceWith(newNode)是有效的ES5|offset|length|style|CODE|1513618|...array是扩展运算符，将每个数组元素作为参数传递|1513619|entityMap^0|0|0|0|S|0|0|8|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<p>Use modern JS!</p>

<pre><code>const node = document.getElementsByClassName('.remove-just-this')[0];
node.replaceWith(...node.childNodes); // or node.children, if you don't want textNodes
</code></pre>

<p><code>oldNode.replaceWith(newNode)</code> is valid ES5</p>

<p><code>...array</code> is the spread operator, passing each array element as a parameter</p>


blocks|key|1513660|text|将div替换为其内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1513661|​|1513662|const+wrapper+=+document.querySelector('.remove-just-this');
wrapper.outerHTML+=+wrapper.innerHTML;|code-block|syntax|javascript|1513663|<div>
++pre+text
++<div+class="remove-just-this">
++++<p>child+foo</p>
++++<p>child+bar</p>
++++nested+text
++</div>
++post+text
</div>|1513664|1513665|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Replace div with its contents:   </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const wrapper = document.querySelector('.remove-just-this');
wrapper.outerHTML = wrapper.innerHTML;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  pre text
  &lt;div class="remove-just-this"&gt;
    &lt;p&gt;child foo&lt;/p&gt;
    &lt;p&gt;child bar&lt;/p&gt;
    nested text
  &lt;/div&gt;
  post text
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>Let's say:</p>

<pre><code>&lt;div&gt;
  pre text
  &lt;div class="remove-just-this"&gt;
    &lt;p&gt;child foo&lt;/p&gt;
    &lt;p&gt;child bar&lt;/p&gt;
    nested text
  &lt;/div&gt;
  post text
&lt;/div&gt;
</code></pre>

<p>to this:</p>

<pre><code>&lt;div&gt;
  pre text
  &lt;p&gt;child foo&lt;/p&gt;
  &lt;p&gt;child bar&lt;/p&gt;
  nested text
  post text
&lt;/div&gt;
</code></pre>

<p>I've been figuring out using Mootools, jQuery and even (raw) JavaScript, but couldn't get the idea how to do this.</p>


How to remove only the parent element and not its child elements in JavaScript?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

比方说：<div>  pre text  <div class="remove-just-this">    <p>child foo</p>    <p>child bar</p>    nested text  </div>  post text</div>要这样做：<div>  pre text  <p>chil...

问如何在JavaScript中只删除父元素而不删除其子元素？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中只删除父元素而不删除其子元素？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中只删除父元素而不删除其子元素？
EN