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

而且我要删除div内部的所有文本与类thumbs。我尝试过，但不幸的是，它只删除了“文本1”而不是其他文件。

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

编辑：我想你红粉给我的每一个建议。而大多数的 他们正在努力，但我还是坚持了haim770解决方案

Answer 1

问题是contents()只会返回每个.thumb的直接（子）节点。您可以收集所有这些递归，或使用find('*')来接他们：

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

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

见Fiddle

Answer 2

假设你想要的是像离开你可以这样做：

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

结果将是：

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

Answer 3

在任何现代的浏览器，你可以使用下面的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>

或者又一个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>

我用jQuery的2这是IE9 +

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"> 
 
\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();