删除没有 Jquery 的包装 div（原始 javascript）答案

【问题标题】：Removing wrapper div without Jquery (raw javascript)删除没有 Jquery 的包装 div（原始 javascript）
【发布时间】：2012-07-20 21:31:17
【问题描述】：

我知道有一个名为 unwrap 的 Jquery 解决方案，但我正在编写“原始”JavaScript。没有 jQuery，我没有找到任何解决方案。

我想像这样删除一个 div：

<div><div id="mydiv">Important text here</div></div>

删除“mydiv”后：

<div>Important text here</div>

我该怎么办，我想知道理论。

提前致谢。

【问题讨论】：

你试过浏览jQuery的源码吗？
@JosephtheDreamer，是的，但我真的想不通，我不是一个真正的 jQuery 迷。

标签： javascript html wrapper

【解决方案1】：

这条线不应该工作吗

 document.getElementById("mydiv").outerHTML = document.getElementById("mydiv").innerHTML

看到这个JSBin Example（检查元素）

【讨论】：

感谢它的工作！现在我将详细了解这个神秘的“outerHTML”属性。
最好的解决方案，因为它保持在 DOM 树中的位置！
我发现附加到 innerHtml 中元素的事件丢失了。有什么诀窍可以保留这些吗？

【解决方案2】：

您需要为此使用removeChild 方法：

var divToRemove = document.getElementById('mydiv').;
var tmpStr = divToRemove.innerHTML;
var parent = divToRemove.parentNode;
parent.removeChild(divToRemove);
parent.inerHTML(tmpStr);

【讨论】：

这将完全重写父innerHTML，这是不好的。（中间可能有更多文字）

【解决方案3】：

试试

var el = document.getElementById('mydiv');
var text = el.innerText; //or el.innerHTML
    el.parentNode.innerHTML = text;

这会将 mydiv 父级的 html 替换为 mydiv 的内容。

【讨论】：

和@antyrat 的回答一样的问题。
所以将使用outerHTML，但这不是跨浏览器兼容的。 jsfiddle.net/gRoberts/ksCbT 显示它工作正常。
我测试了我的代码，它在：firefox chrome safari opera 和 internet explorer 中运行。