Question

我想从一些html字符串中删除空元素。我知道我可以运行类似的东西：

$('p').each(function(index, item) {
    if($.trim($(item).text()) === "") {
        $(item).remove();
    }
});

问题是我要删除所有空节点 - 不仅仅是p。此外，我希望脚本将中的p节点视为空，因为它只包含空元素。你有一些类似的简单实现吗？

[编辑] 我忘了添加：我可以使用jQuery，但我想要遍历和编辑的html是一个字符串 - 而不是实际的文档。那我怎么做这个操作呢？我尝试使用var html = $.parseHTML('')但在每次循环后我仍然得到相同的字符串...

Answer 1

尝试类似

的内容

do {
    empty = $("*:empty");
    count = empty.length;
    empty.remove();
}
while ( count > 0 );

它是迭代的而不是递归的，但应该做的伎俩

Answer 2

实际上你的代码工作正常。请参阅此fiddle。

它只显示，里面有内容。那你想要什么？

HTML

<p>hi 1</p>
<p></p>
<p><span>hi 2</span></p>
<p><span></span></p>

脚本

$('p').each(function(index, item) {
    if($.trim($(item).text()) === "") {
        $(item).remove();
    }
});

Answer 3

您可以使用以下代码实现此目的： -

function removeEmptyTag(root) {
    var $root = $(root);
    $root.contents().each(function () {
    if (this.nodeType === 1) {
        removeEmptyTag(this);
    }
    });

    if (!$root.is("area,base,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr") && !$root.html().trim().length) {
    $root.remove();
    }
}

removeEmptyTag("#divIdHere");

Fiddle

Answer 4

这是vanilla JS的Paul's function的一个推文（需要Element.matches() polyfill）：

function removeEmpty(parent) {
    // for each child
    [].forEach.call(parent.children, function(child) {
        // repeat operation
        removeEmpty(child);

        // remove if it matches selector
        if (child.matches(':empty')) {
            parent.removeChild(child);
        }
    });
}

从html中递归删除空节点

4 个答案: