javascript - 如何删除 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 类的所有文本。我尝试了这个，但不幸的是，它只删除“Text 1”，而不删除其他内容。

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

EDIT : I tried every single suggestion you gived to me. And most of them are working, but I stuck with haim770 solution

Answer 1

问题是 contents() 只会返回每个 .thumb 的直接(子)节点。您可以递归地收集它们，或者使用 find('*') 来获取它们:

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

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

参见Fiddle