如何刪除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>

編輯：我嘗試了你給我的每一個建議。 他們中的大多數都在工作，但我堅持使用haim770解決方案

Answer 1

假設您想要的只是剩下的圖像，您可以這樣做：

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

結果將是：

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

Answer 2

問題是contents()只返回每個.thumb的直接（子）節點。 您可以遞歸地收集它們，或使用find('*')來獲取它們：

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

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

見小提琴

Answer 3

刪除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 4

您可以使用遞歸函數：

 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"> another jumps over a lazy dog! </div> third </div> 

JSFiddle鏈接 。

Answer 5

遞歸解決方案

 function clearText(elem){ console.log({elemt: elem}) if(elem.firstChild && elem.firstChild.nodeType == 3) { elem.firstChild.nodeValue = ''; } if(elem.children.length) { $.each(elem.children, function(){ clearText(this); }); } } 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 6

您也可以使用以下代碼刪除所有子元素文本：

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

Answer 7

在任何現代瀏覽器中，您都可以使用以下POJS。

請參見Document.querySelector

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> 

或者另一個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> 

我使用的是jQuery 2，它是IE9 +