97

まあ言ってみれば：

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

これに：

<div>
  pre text
  <p>child foo</p>
  <p>child bar</p>
  nested text
  post text
</div>

私は Mootools、jQuery、さらには (生の) JavaScript を使用して考え出しましたが、これを行う方法を理解できませんでした。

4

12 に答える 12

142

jQueryを使用すると、次のことができます。

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

ドキュメントへのクイック リンク:

  • 内容( ) : jQuery
  • replaceWith (コンテンツ: [文字列|要素| jQuery ] ) : jQuery
于 2008-10-04T09:37:35.073 に答える
36

ライブラリに依存しない方法は、削除する前に、削除する要素のすべての子ノードをそれ自体の前に挿入することです（これにより、それらは暗黙的に古い位置から削除されます）。

while (nodeToBeRemoved.firstChild)
{
    nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,
                                            nodeToBeRemoved);
}

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

これにより、すべての子ノードが正しい場所に正しい順序で移動します。

于 2008-10-04T12:11:36.527 に答える
35

イベント ハンドラーなどを保持するために、DOM でこれを行う必要がありますinnerHTML(jk が提供する jQuery ソリューションを使用する場合は、内部で使用するのではなく、DOM ノードを移動するようにしてください)。innerHTML

私の答えはinsin のものによく似ていますが、大規模な構造の場合はパフォーマンスが向上します (各ノードを個別に追加すると、CSS をそれぞれに再適用する必要がある再描画に負担がかかる可能性がありますappendChild。DocumentFragment子はすべて追加され、ドキュメントに追加されます)。

var fragment = document.createDocumentFragment();
while(element.firstChild) {
    fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment, element);
于 2008-10-06T22:07:00.533 に答える
30 
 $('.remove-just-this > *').unwrap()
于 2011-10-19T13:55:19.220 に答える
2

どのライブラリを使用していても、外側の div を DOM から削除する前に、内側の div を複製する必要があります。次に、複製された内部 div を、外部 div があった DOM 内の場所に追加する必要があります。したがって、手順は次のとおりです。

  1. 外側の div の親への参照を変数に保存する
  2. 内側の div を別の変数にコピーします。innerHTMLこれは、内側の div を変数に保存するか、ノードごとに再帰的に内側のツリーをコピーすることで、すばやく汚れた方法で行うことができます。
  3. removeChild外側の div を引数として、外側の div の親を呼び出します。
  4. コピーした内部コンテンツを、外部 div の親の正しい位置に挿入します。

一部のライブラリはこれの一部またはすべてを行いますが、上記のようなことがボンネットの下で行われます。

于 2008-10-04T11:06:24.923 に答える
2

そして、mootools でも試したので、mootools での解決策を次に示します。

var children = $('remove-just-this').getChildren();
children.replaces($('remove-just-this');

完全にテストされていないことに注意してください。ただし、以前に mootools を使用したことがあり、動作するはずです。

http://mootools.net/docs/Element/Element#Element:getChildren

http://mootools.net/docs/Element/Element#Element:replaces

于 2008-10-22T21:30:13.130 に答える
0

これと同じことをパジャマでやりたい場合は、次のようにします。それはうまく機能します（まぶたに感謝します）。これのおかげで、スタイルを台無しにすることなく適切に実行する適切なリッチ テキスト エディターを作成できました。

def remove_node(doc, element):
    """ removes a specific node, adding its children in its place
    """
    fragment = doc.createDocumentFragment()
    while element.firstChild:
        fragment.appendChild(element.firstChild)

    parent = element.parentNode
    parent.insertBefore(fragment, element)
    parent.removeChild(element)
于 2012-04-24T11:57:45.450 に答える