我想在不删除孩子的情况下删除父母 - 这可能吗?
HTML结构:
<div class="wrapper">
<img src"">
</div>
<div class="button">Remove wrapper</div>
点击按钮后我想:
<img src"">
<div class="button">Remove wrapper</div>
答案 0 :(得分:23)
不使用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);
}
unwrap(document.querySelector('.wrapper'));
答案 1 :(得分:10)
可以使用此API:http://api.jquery.com/unwrap/
.unwrap
代码将在这些方面看起来:
示例代码
$('.button').click(function(){
$('.wrapper img').unwrap();
});
答案 2 :(得分:9)
感到惊讶的是,没有人发布最简单的答案:
// Find your wrapper HTMLElement
var wrapper = document.querySelector('.wrapper');
// Replace the whole wrapper with its own contents
wrapper.outerHTML = wrapper.innerHTML;
答案 3 :(得分:7)
纯JS(ES6)解决方案,在我看来比jQuery解决方案更容易阅读。
function unwrap(node) {
node.replaceWith(...node.childNodes);
}
节点必须是ElementNode
答案 4 :(得分:5)
纯粹的javascript解决方案,我确信有人可以简化它,但这是纯JavaScript用户的替代方案。
HTML
<div class="button" onclick="unwrap(this)">Remove wrapper</div>
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;
}
答案 5 :(得分:1)
如果你正在使用jQuery:
$(".wrapper").replaceWith($(".wrapper").html());
答案 6 :(得分:-2)
如果包装元素包含文本,则文本将保留子节点。