javascript - jqueryを使用して親要素から（内部要素を削除せずに）テキストを削除する方法

Question

次のようなものがあると想像してください（http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/から変更）

<div id="foo">
    first
    <div id="bar1">
        jumps over a lazy dog!
    </div>
    second
    <div id="bar2">
        another jumps over a lazy dog!
    </div>
    third
</div>

子要素に影響を与えずに、DOM から "first"、"second"、"third" だけ (テキストのみ) を削除するにはどうすればよいですか。

Answer 1

すべての子テキスト ノードを削除したい場合は、次のコマンドを使用.contents()し.filter()て、一致したセットをテキスト ノードのみに減らします。

$("#foo").contents().filter(function () {
     return this.nodeType === 3; 
}).remove();​​​​​​​

これが実際の例です。

注: これにより、子要素の既存のイベント ハンドラーが保持されますが、これは使用.html()できません (要素が DOM から削除され、再度追加されるため)。

注2：リンクされた質問の一部の回答は、ここでの私の回答と同様のコードを示していますが、nodeType定数を使用しています（例：return this.nodeType === Node.TEXT_NODE）。Nodeバージョン 9 より前の IE はこのプロパティを実装していないため、これは悪い習慣です。整数を使用する方が安全です (これはDOM level 2 specにあります)。

Answer 2

これは、IE 5 までのすべての主要なブラウザーで動作する非 jQuery バージョンです。jQuery のない生活がいかに恐ろしいものであるかを示すためです。

デモ: http://jsfiddle.net/timdown/aHW9J/

コード：

var el = document.getElementById("foo"), child = el.firstChild, nextChild;

while (child) {
    nextChild = child.nextSibling;
    if (child.nodeType == 3) {
        el.removeChild(child);
    }
    child = nextChild;
}

Answer 3

これを試して ：

$("#foo").html($("#foo").find("div"));​

デモ: http://jsfiddle.net/PXxC4/

Answer 4

これを使用できます。

$("#foo").html($("#foo").children());​