javascript 如何在不移除子元素的情况下移除包装器（父元素）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19261197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove wrapper (parent element) without removing the child?
提问by lipenco
I would like to remove the parent without removing the child - is this possible?
我想在不移除孩子的情况下移除父母 - 这可能吗？
HTML structure:
HTML结构：
<div class="wrapper">
<img src"">
</div>
<div class="button">Remove wrapper</div>
After clicking on the button I would like to have:
单击按钮后，我想要：
<img src"">
<div class="button">Remove wrapper</div>
采纳答案by Tats_innit
Could use this API: http://api.jquery.com/unwrap/
可以使用这个 API：http: //api.jquery.com/unwrap/
Demohttp://jsfiddle.net/7GrbM/
.unwrap
.unwrap
Code will look something on these lines:
代码将在这些行上看起来：
Sample Code
示例代码
$('.button').click(function(){
$('.wrapper img').unwrap();
});
回答by Web_Designer
Pure JS solution that doesn't use innerHTML:
不使用innerHTML的纯JS解决方案：
function unwrap(wrapper) {
// place childNodes in document fragment
var docFrag = document.createDocumentFragment();
while (wrapper.firstChild) {
var child = wrapper.removeChild(wrapper.firstChild);
docFrag.appendChild(child);
}
// replace wrapper with document fragment
wrapper.parentNode.replaceChild(docFrag, wrapper);
}
Try it:
试试看：
unwrap(document.querySelector('.wrapper'));
回答by Tom Oeser
Pure JS (ES6) solution, in my opinion easier to read than jQuery-solutions.
纯 JS (ES6) 解决方案，在我看来比 jQuery 解决方案更容易阅读。
function unwrap(node) {
node.replaceWith(...node.childNodes);
}
node has to be an ElementNode
节点必须是一个 ElementNode
回答by ChaseMoskal
Surprised that nobody's posting the simplest answer:
很惊讶没有人发布最简单的答案：
// Find your wrapper HTMLElement
var wrapper = document.querySelector('.wrapper');
// Replace the whole wrapper with its own contents
wrapper.outerHTML = wrapper.innerHTML;
回答by Jay Harris
Pure javascript solution, i'm sure someone can simplify it more but this is an alternative for pure javascript guys.
纯 javascript 解决方案，我相信有人可以简化它，但这是纯 javascript 人员的替代方案。
HTML
HTML
<div class="button" onclick="unwrap(this)">Remove wrapper</div>
Javascript (pure)
Javascript（纯）
function unwrap(i) {
var wrapper = i.parentNode.getElementsByClassName('wrapper')[0];
// return if wrapper already been unwrapped
if (typeof wrapper === 'undefined') return false;
// remmove the wrapper from img
i.parentNode.innerHTML = wrapper.innerHTML + i.outerHTML;
return true;
}
回答by rrrafalsz
if you're using jQuery:
如果您使用 jQuery：
$(".wrapper").replaceWith($(".wrapper").html());
回答by Filipe Torres
If the wrapper element contains text, the text remains with child nodes.
如果包装元素包含文本，则文本将保留在子节点中。
