6

私はこのようなHTMLを持っています：

<div>TEXT
    <span>SPAN</span>
        <a href="">LINK</a>
</div>

要素の内容を削除したいのですが、通常は次のようにします。

$('*').empty();

また

$('*').contents().empty();

ただし、これにより、最初のスパンとそのコンテンツ（divとリンク）が削除/空になります。要素を空にしている間、要素を保持するにはどうすればよいですか？したがって、最終結果は次のようになります。

<span>
    <div></div>
    <a href=""></a>
</span>

任意のHTMLに適用できる「ユニバーサル」なものを探していることに注意してください。上記は単なる例であり、実際にはHTML構造にはより多くのデータが含まれます。

JsFiddleでの例

4

4 に答える 4

3

すべてのノードを再帰的にループし、nodeTypeプロパティが3（）に等しいすべての子を削除しNode.TEXT_NODEます。jQueryはテキストノードだけを選択できないため、これはバニラJavaScriptを使用して行うことができます。

例：

function removeText(node) {
    if (!node || !node.childNodes || !node.childNodes.length) return;
    for (var i=node.childNodes.length-1; i>=0; --i) {
        var childNode = node.childNodes[i];
        if (childNode.nodeType === 3) node.removeChild(childNode);
        else if (childNode.nodeType === 1) removeText(childNode);
    }   
}

または、jQueryプラグインにパックされています：

$.fn.removeText = function() {
    for (var i=this.length-1; i>=0; --i) removeText(this[i]);
    return this;
};

http://jsfiddle.net/hcKsX/

于 2013-03-19T21:13:01.140 に答える
2

親アイテムの子を取得し、次のようにhtmlを設定します。

$('#myspan').children().html('');

jsFiddle

于 2013-03-19T21:13:07.623 に答える
1

これらのソリューションはすべて問題ありませんが、いずれも条件を満たしていません。

例1：リーフノード内のすべてのテキストを削除する

$('body *:not(:has(*))').empty()

結果：

<span>SPAN
    <div></div>
    <a href=""></a>
</span>

例2：1つのノードの子内のすべてのテキストを削除する

$('body span').children().html('')

結果：

<span>SPAN
    <div></div>
    <a href=""></a>
</span>

（同上）。ただし、ネストのレベルが2つを超える場合、このソリューションは機能しません。

他のソリューションにも同様の欠点があります。

ここでの本当の問題は、親ノードとテキストノードの両方であるノードからテキストをクリアする良い方法がないことです。何かを一緒にハックするか、毎回ビューを再レンダリングする必要があります。

于 2013-03-19T21:17:50.873 に答える
0

これにより、DOMツリー内のすべてのテキストノードが削除されます。

$('*').contents().filter(
  function() {
    return this.nodeType == 3;
}).remove();
于 2014-09-04T09:24:24.197 に答える