Question

我有一个客户使用WYSIWYG编辑器来创建新的网站页面。问题是有时WYSIWYG编辑器放入空p标签

<p>&nbsp;</p>

这对布局造成了严重破坏，所以我写了一个小函数来删除这些空标记

$('p')
.filter(function() {
   return $.trim($(this).text()) === ''
})
.remove()

现在的问题是，当一个图像被插入到所见即所得的编辑器中时，它会被包含在一个p标签中，我的功能会将它从屏幕上删除。

可以更新我的功能以允许图像，还是可以搜索并删除空的p标签

提前致谢

詹姆斯

Answer 1

您可以使用:empty伪选择器仅选择没有子元素的元素：

$("p:empty").remove();

但是，如果您的p元素包含空格，则不会删除任何其他元素（因为:empty将文本节点视为子节点）。因此，在运行上述内容之前，您可能需要从.trim元素中删除空格（使用p）。

您当前方法的问题是，img等标记不包含任何文字，因此您的filter函数认为只包含p元素的img元素应该被删除。

Answer 2

您可以使过滤器也确保没有子元素：

$('p').filter(function() {
    var $this = $(this);
    return !$this.children().length && $.trim($this.text()) === '';
}).remove()

Answer 3

$('p').not(':has("img")')
.filter(function() {
   return $.trim($(this).text()) === ''
})
.remove()

Answer 4

这个怎么样

$('p').each(function(){
    if($(this).html() == "&nbsp;"){
        $(this).remove();  
    }
});

Answer 5

修复WYSIWYG，如果是javascript，如果没有，则修复后端而不是前端。

Answer 6

您可以尝试在要删除的块周围使用div标签，例如。在您的jQuery语句中，您可以根据div id而不是所有段落进行调用。