删除包装 div 并保持所有子 div 完好无损？答案

【问题标题】：remove wrapping div and leave all sub-divs intact?删除包装 div 并保持所有子 div 完好无损？
【发布时间】：2019-01-11 15:52:15
【问题描述】：

我有一个包装 div，里面有几个子 div，这些子 div 里面也有标签。我想删除包装器 div。我已经考虑过 JQuery 的展开，但似乎我需要指定子 div 来告诉 Jquery 要展开什么。如果有几个孩子，这会起作用吗？

所以，代码如下：

<div id="wrapper">
  <div id="innerDiv1"></div>
  <div id="innerDiv2"></div>
  <div id="innerDiv3"></div>
</div>

一如既往地感谢任何帮助。

谢谢。

【问题讨论】：

标签： jquery

【解决方案1】：

unwrap 方法可以正常工作（您可以选择任何/任意数量的兄弟姐妹）：

$("#innerDiv1").unwrap();

来自文档（已添加重点）：

匹配的元素（和它们的兄弟，如果有的话）替换它们的 DOM 结构中的父级。

【讨论】：

谢谢@James Allardice。即使我检查了 JQuery 文档，我还是以某种方式错过了“和他们的兄弟姐妹”部分。我猜有点睡眼惺忪。
@robertsmith - 没问题，很高兴我能帮上忙 :)

【解决方案2】：

添加到@james

你可以这样做

var innerDivs = $("#wrapper").html();
$("#wrapper").remove();
$("body").append(innerDivs); // you will need to change this to append to whatever element you like

jsfiddle 示例

http://jsfiddle.net/dAZ9D/

【讨论】：

你可以这样做，但是你会丢失任何绑定到#wrapper 的子元素的事件处理程序，因为元素被完全从 DOM 中删除然后再次添加。使用 unwrap 方法将保留这些事件处理程序，因为元素永远不会从 DOM 中删除。
是的，james 没错，但他没有特别询问是否要维护甚至处理程序。这就是为什么我说“添加到詹姆斯的答案”:) 干杯！

【解决方案3】：

另一种解决方案是将.replaceWith() 与.html() 结合使用：

jQuery('#wrapper').each(function () {
    var t = jQuery(this);
    t.replaceWith(t.html());
});

【讨论】：

也可以像 2019 年一样在最新的 Jquery 中这样做：$(this).replaceWith($(this).html());

【解决方案4】：

function unwrap(el){
    var parent = el.parentNode; // get the element's parent node
    while (el.firstChild){
        parent.insertBefore(el.firstChild, el); // move all children out of the element
    }
    parent.removeChild(el); // remove the empty element
}

代码直截了当，比相应的 jQuery 方法 $.unwrap() 快得多。

来源：https://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/

【讨论】：