Question

我希望能够检查元素是否包含其中的任何文本。如果元素中没有任何文本，我希望能够删除该元素。

但是，此dom元素可能包含子级或更多子级，并且这些子级也可能包含其他子级。所以我希望能够跟随元素的dom树并搜索其中的所有元素以获取文本。

这样的事情：

<div id="myElement">
  <span></span>
  <span></span>
  <span>
    <span></span>
    <span>b</span>
  </span>
</div>

现在div直接没有任何文字，但它是孩子们的。如何检查整个div中是否有任何文本？

修改

显然我在其中一个跨度中有一个字符，我知道这是一个零宽度的空白区域。所以基本上即使没有文本，jQuery text（）也会将其视为一个并返回false。

我如何解决这个问题？

Answer 1

jQuery的text()方法包括后代，所以：

$('.my-element-class').each(function() {
    if ( $(this).text() === '' ) {
        $(this).remove();
    }
});

要单独检查所有后代元素，我们必须更复杂一些：

$('.my-element-class').find('span').andSelf().each(function() {
    ...

http://api.jquery.com/text/

Answer 2

遍历myElement的所有后代并检查它们的html（）。如果值不为空＆＃34;＆＃34;然后递归迭代该对象。

$( "#myElement" ).find( "*" ).each( function(){

   var $element = $(this);
   if ( $.trim( $element.html() ).length == 0 )
   {
     $element.remove();
   }

});

Answer 3

只需使用jQuery函数text（）来检查是否有任何文本（它将忽略任何内容中的html标记，因此无需担心里面的子项。）如果要删除空格，可以使用trim。

var text = $('#myElement').text();
var trimedText = text.trim();

删除零宽度空白区域：

var text = trimmedText.replace(/[\u200B\uFEFF]/gm,'');

Answer 4

JS解决方案

此函数以递归方式检查和删除空元素（嵌套与否），它还处理空格问题。

        function removeEmptyElements(elem) {
            var childNodes = elem.childNodes;
            var allEmpty = true;
            for (var index in childNodes) {
                if (childNodes[index]) {
                    if (childNodes[index].nodeType === 3 && !/^\s*$/.test(childNodes[index].textContent)) {
                        allEmpty = false;
                    }
                    else if (childNodes[index].nodeType === 1) {
                        if (!childNodes[index].hasChildNodes()) {
                            //here childNodes[index] is the empty element
                            childNodes[index].parentNode.removeChild(childNodes[index]);
                        } else {
                            //do a recursive call to check whether any of the nested elements are empty
                            removeEmptyElements(childNodes[index]);
                        }
                        allEmpty = false;
                    }
                }

            }
            if (allEmpty) {
                //here elem is the empty element
                elem.parentNode.removeChild(elem);
            }
        }

通过＆＃39; root＆＃39; element，示例中的myElement，函数removeEmptyElements。

用语言来说，它如下：

获取根元素的所有子节点。
默认情况下假设所有子节点都为空/空格。
遍历每个子节点。
如果其中一个子节点不是非空白文本，请将allEmpty设置为false，因为现在知道根元素不为空
如果子节点是有效元素，则为else：
- 检查是否有任何子节点，如果没有，请将其删除
- 如果它有子节点，请使用该元素进行递归调用
- 因为现在知道根元素包含有效元素，所以它不再被视为空，因此将allEmpty设置为false。
如果allEmpty尚未设置为false，则根元素为空，因此您可以将其删除。

Answer 5

这些答案都不使用innerText，这可能是最简单的。

innerText获取当前节点和所有后代的渲染文本。

因此，要检查节点的子树中是否包含任何文本，可以使用此衬里：

myNode.innerText.trim() === '';

如果该表达式的值为true，则myNode或其子项中没有文本。

检查DOM元素和子元素是否包含任何文本[JS或jQuery]

5 个答案:

JS解决方案