javascript - 如何在没有jquery的情况下删除多个元素的包装？

Question

我有一组元素，想要在 Javascript 中删除其容器包装。

我已经研究过( this 、 this 和 this )，但我需要一个 1) 不涉及 jQuery 的解决方案。 2) 并且可以处理多个元素。

HTML:

<div class="global-container stacked">
    <article class="global"></article>
    <article class="global"></article>
</div>

我已经尝试过:

var globalArticles = document.getElementsByClassName('global');
globalArticles.outerHTML = globalArticles.innerHTML;

但这行不通。如何从所有 article.global 中删除包装器？

Answer 1

您可以创建自己的 unwrap() 方法，如下所示

function unwrap(elems) {
    elems = 'length' in elems ? elems : [elems];
    for (var i = 0; i < elems.length; i++) {
        var elem        = elems[i];
        var parent      = elem.parentNode;
        var grandparent = parent.parentNode;

        grandparent.insertBefore(elem, parent);

        if (parent.children.length === 0) 
            grandparent.removeChild(parent);
    }
}

var globalArticles = document.getElementsByClassName('global');    

unwrap(globalArticles);