1

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

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

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

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

4

5 回答 5

5

最近我正在寻找解决同样问题的方法。递归函数就是答案。

function removeEmptyTagsRecursively($el) {
    if ($el.children().length) {

        $el.children().each(function(i, val) {
            removeEmptyTagsRecursively($(val));
        });

        $el.children(':empty').remove();
    }
}

在这里摆弄：https ://jsfiddle.net/635utakr/9/

于 2015-09-09T22:01:58.283 回答
1

这是Paul 的vanilla JS 函数的一周（需要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);
        }
    });
}
于 2016-10-14T18:43:10.363 回答
0

尝试类似的东西

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

它是迭代的而不是递归的，但应该可以解决问题

于 2013-10-25T05:35:36.040 回答
0

实际上，您的代码运行良好。看到这个小提琴。

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

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();
    }
});
于 2013-10-25T05:37:31.697 回答
0

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

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

小提琴

于 2013-10-25T05:43:33.263 回答