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

假设您想要的只是剩下的图像：

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

请参阅Fiddle

Answer 3

删除div
中的所有文字

是否要在保留元素的同时删除所有文本节点（不仅仅是直接子节点）？

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

说明：

.find("*")找到.thumbs
.addBack()将.thumbs添加到集合中（现在我们有.thumbs 和所有后代）
.contents()获取集合的所有节点（因此它获取.thumbs的所有节点，而不仅仅是直接子节点）
您已经知道如何仅过滤文本节点并将其删除

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 link

Answer 5

递归解决方案

＆＃13;

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])

＆＃13;

<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>

＆＃13;

Answer 6

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

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

Answer 7

在任何现代浏览器中，您都可以使用以下POJS。

请参阅Document.querySelector

IE8 +

请参阅TreeWalker API和Document.createTreeWalker

IE9 +

＆＃13;

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);

＆＃13;

<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>

＆＃13;

或者是另一个jQuery解决方案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我使用的是jQuery 2，即IE9 +

如何删除DOM元素中的所有文本

7 个答案: