使用现代JS！

Question

我正在尝试做与此问题类似/相同的事情： How to remove only the parent element and not its child elements in JavaScript?

<div>
    This is some text here
    <h2>This is more text</h2>
</div>

我想要的只是删除H2标签。结果应该是：

<div>
    This is some text here
    This is more text
</div>

假设我已经拥有H2元素：

if (parentElement.nodeName.toLowerCase() == "h2") {
    //now what? I basically want to this: $.replaceWith(parentElement.innerText)
    //just without jQuery
}

Answer 1

假设变量h2准确引用了您想要采取行动的h2元素，我的第一个想法是：

var h2 = document.getElementsByTagName('h2')[0],
    textnode = h2.firstChild;

h2.parentNode.insertBefore(textnode,h2.nextSibling);
h2.parentNode.removeChild(h2);

JS Fiddle demo

为了使它稍微干一点，函数方法可能是：

function unwrapH2(el) {
    if (!el) {
        return false;
    }
    else {
        var textnode = el.firstChild,
            elParent = el.parentNode;

        elParent.insertBefore(textnode, h2.nextSibling);
        elParent.removeChild(h2);
    }
}

var h2 = document.getElementsByTagName('h2')[0];

unwrapH2(h2);

JS Fiddle demo

根据Felix Kling的评论（下文）调整上述内容，并使用replaceChild()：

function unwrapH2(el) {
    if (!el) {
        return false;
    }
    else {
        var textnode = el.firstChild,
            elParent = el.parentNode;
        elParent.replaceChild(textnode,el);
    }
}

var h2 = document.getElementsByTagName('h2')[0];

unwrapH2(h2);

JS Fiddle demo

Answer 2

使用现代JS！

const h2 = document.getElementsByTagName('h2')[0];
h2.replaceWith(h2.firstChild);

要替换所有孩子，请使用：

h2.replaceWith(...h2.childNodes); // or h2.children, if you don't want textNodes

developer.mozilla.org

Can I Use - 86％2018年11月

Answer 3

首先，开始使用jQuery。它让你的生活更轻松。

在jQuery中，执行以下操作：

var h2html = $('div h2').html();
$('div h2').remove();
$('div').append(h2html);

修改

以上仅适用于1 div和1 h2元素，这是div中的最后一个元素。这只是一个简单的例子。以下是让您的生活更轻松的代码：

$('div h2').each(function (x, y) { $(this).replaceWith($(this).html()); });

将父元素替换为其内容

3 个答案:

使用现代JS！