DOM要素内のすべてのテキストを削除するには

Question

私はこのように見えるdivを持っています。

<div class="main"> 
    <div class="slide"></div> 
    <div class="thumbs"> 
     Text 1 
     <img src="https://cdn1.iconfinder.com/data/icons/flat-business-icons/128/stack-128.png"/> 
     <div></div> 
     <p>Text 2</p> 
     <div> 
      <p>Text 3</p> 
      <div><p>Text 4</p></div> 
     </div> 
    </div> 
</div> 

そして、私はクラスthumbsでdiv内のすべてのテキストを削除したいです。私はこれを試しましたが、残念ながら "テキスト1"だけを削除し、他のものは削除しません。

<script> 
    $(".main .thumbs").contents().filter(function() { 
     return this.nodeType === 3; 
    }).remove(); 
</script> 

編集：私はあなたが私にgived一つ一つの提案を試してみました。そしてそれら のほとんどが働いているが、私は、あなたが望むすべての画像は、あなたが行うことができます残っていると仮定すると、haim770溶液で

Answer 1

問題は、contents()が各.thumbの直接（子）ノードのみを返すということです。あなたはどちらかの再帰的にそれらすべてを集め、またはそれらを取得するためにfind('*')を使用することができます。

function removeTextNodes() 
{ 
    $(this).contents().filter(function() { 
    return this.nodeType === 3; 
    }).remove(); 
} 

$(".main .thumbs").find('*').addBack().each(removeTextNodes); 

では、次のPOJSを使用することができます任意の近代的なブラウザでFiddle

Answer 2

を立ち往生：

$(".main .thumbs").html(function(){ 
    return $(this).find('img'); 
}); 

結果は次のようになります。

<div class="thumbs"> 
    <img src="..."> 
</div> 

Answer 3

を参照してください。

は、IE8 +

がTreeWalker APIとDocument.createTreeWalker

IE9 +

var firstThumbs = document.querySelector('.thumbs'); 
 
var treeWalker = document.createTreeWalker(firstThumbs, NodeFilter.SHOW_TEXT, { 
 
    acceptNode: function(node) { 
 
    return NodeFilter.FILTER_ACCEPT; 
 
    } 
 
}, false); 
 

 
setTimeout(function() { 
 
    while (treeWalker.nextNode()) { 
 
    treeWalker.currentNode.textContent = ''; 
 
    } 
 
}, 3000);

<div class="main"> 
 
    <div class="slide"></div> 
 
    <div class="thumbs"> 
 
    Text 1 
 
    <img src="https://cdn1.iconfinder.com/data/icons/flat-business-icons/128/stack-128.png" /> 
 
    <div></div> 
 
    <p>Text 2</p> 
 
    <div> 
 
     <p>Text 3</p> 
 
     <div> 
 
     <p>Text 4</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

か、まだ参照してくださいDocument.querySelector

を参照してください。 nother jQueryソリューション。

setTimeout(function() { 
 
    $('.thumbs') 
 
    .first() 
 
    .find('*') 
 
    .addBack() 
 
    .contents() 
 
    .filter(function(index, node) { 
 
     return node.nodeType == 3; 
 
    }) 
 
    .remove(); 
 
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="slide"></div> 
 
    <div class="thumbs"> 
 
    Text 1 
 
    <img src="https://cdn1.iconfinder.com/data/icons/flat-business-icons/128/stack-128.png" /> 
 
    <div></div> 
 
    <p>Text 2</p> 
 
    <div> 
 
     <p>Text 3</p> 
 
     <div> 
 
     <p>Text 4</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

私はあなたが再帰関数を使用することができIE9 +

Answer 4

であるjQueryの2を使用：

var removeTextNodes = function(el) { 
 
    el.contents().filter(function() { 
 
     return this.nodeType === 3; 
 
    }).remove(); 
 

 
    el.contents().filter(function() { 
 
     return this.nodeType !== 3; 
 
    }).each(function() { 
 
     removeTextNodes($(this)); 
 
    }); 
 
} 
 
removeTextNodes($('#foo'));

#bar1 { 
 
    border: 1px solid red; 
 
    padding: 5px; 
 
} 
 
#bar2 { 
 
    border: 1px solid yellow; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo"> 
 
    first 
 
    <div id="bar1"> 
 
     jumps over a lazy dog! 
 
    </div> 
 
    second 
 
    <div id="bar2"> 
 
\t \t another jumps over a lazy dog! 
 
    </div> 
 
    third 
 
</div>

JSFiddle link。

Answer 5

がdiv

内のすべてのテキストを削除要素を維持しながら、あなたはすべてのテキストノード（だけでなく、直接の子）を削除しますか？

$(".main .thumbs").find("*").addBack().contents().filter(function(){ 
    return this.nodeType === 3; 
}).remove(); 

説明：

1. .find("*")が.thumbs
2. .addBack()のすべての子孫要素を見つけ、コレクションに.thumbsを追加します（今、我々は.thumbsとそのすべての子孫を持っている）
3. .contents()ますコレクションのすべてのノード（すべてのノードが.thumbsだけでなく、直接の子ノード）
4. あなたは既にのみテキストノードにフィルタリングし、それらをあなたが使用することができます

Answer 6

再帰的なソリューション

function clearText(elem){ 
 
    console.log({elemt: elem}) 
 
     if(elem.firstChild && elem.firstChild.nodeType == 3) { 
 
     elem.firstChild.nodeValue = ''; 
 
     } 
 
     
 
     if(elem.children.length) { 
 
    \t \t \t \t \t $.each(elem.children, function(){ 
 
     \t \t \t \t clearText(this); 
 
      }); 
 
     } 
 
     
 
\t \t \t 
 
} 
 

 
clearText($(".main .thumbs")[0])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="slide"></div> 
 
    <div class="thumbs"> 
 
     Text 1 
 
     <img src="https://cdn1.iconfinder.com/data/icons/flat-business-icons/128/stack-128.png"/> 
 
     <div></div> 
 
     <p>Text 2</p> 
 
     <div> 
 
      <p>Text 3</p> 
 
      <div><p>Text 4</p></div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 7

を削除する方法を知っていますすべての子要素のテキストも削除するコードを以下に示します。

$(".thumbs, .thumbs *") 
    .contents() 
    .filter(function(){ 
     return this.nodeType === 3; 
    }) 
    .remove();