9

私はこの質問と同様/同じことをしようとしています: 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
}
4

3 に答える 3

5

変数が操作対象h2の要素を正確に参照していると仮定するとh2、私の最初の考えは次のようになります。

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

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

JS フィドルのデモ。

もう少しDRYにするために、関数アプローチは次のようになります。

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 フィドルのデモ。

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 フィドルのデモ。

于 2012-08-17T09:57:58.357 に答える
-1

まず、jQuery を使い始めます。それはあなたの人生を楽にします。

jQuery で、次の操作を行います。

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

編集：

上記は、div の最後の要素である1divおよび 1要素でのみ機能します。h2これは簡単な例です。以下は、あなたの人生をさらに楽にするコードです:

$('div h2').each(function (x, y) {
    $(this).replaceWith($(this).html());
});​
于 2012-08-17T09:52:00.220 に答える