如何选择并删除一个 div 元素，当它不包含文本，只有 元素时？

Question

如何选择并删除一个 div 元素，当它不包含文本，只有 元素时？

4

这是我的情景：

<div><br><div>
<div>
    line one.
    <br>
    line two.
</div>
<div><img src="example.jpg"></div>
<div><br></div>
<div><iframe></iframe></div>
<div><br></div>

我需要检查一个div元素是否没有文本并且有br标签，如果是，则将其删除。

我尝试了以下代码：

if ($('div').is(':empty')) { 
    $('div').remove();
}

我认为这不能起作用是因为empty()并不意味着“没有文本”。

我还尝试了这个：

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

这个方法可以起作用，但是它会移除所有不仅仅包含文本的div标签，所以我所有在div中的图片和其他html标签都被移除了。

我尝试过最后一种方法，但是我发现这个方法没有考虑到可能存在在div中的文本。

$('div br:only-child').remove();

我对jQuery还很新，向大家求助可能有些麻烦。提前感谢！

- rholguin

我添加了不同的解决方案，请尝试一下。 - Murad Hasan

但是我仔细看了标题，标题清楚地提到他想要去掉 标签，所以我给出了这个答案。现在我撤销了我的答案，因为答案与实际问题无关。 - Murad Hasan

我又添加了一块代码，请检查并告诉我。 - Murad Hasan

3个回答

1

检查元素的子元素仅为 ，然后检查是否存在空文本。

$('div:has(br)').filter(function(){
   var $div= $(this), $children=$div.children();
   // check if all children are <br>
   if($children.length === $children.filter('br').length){
        // return true or false depending on text
        return !$div.text().trim();
   }
   // children are not all <br>
   return false;
}).remove();

- charlietfl

这在我的代码中同样有效。感谢您的输入和帮助！非常感激你们所有人！ - rholguin

1

我使用了查找和删除的方法：

https://jsfiddle.net/ay4ax3nz/

$("div").each(function(){
    if($(this).html() === '<br>' || $(this).html() === '<br />'){
        $(this).remove();
    }
});

- cngodles

1

太棒了！我通过在img和iframe标签中嵌套br标签来测试了你的代码，它仍然正常工作！感谢你的贡献！ - rholguin

我对它进行了一次更新，包括.trim()。这样，如果你有一个类似于" "的实例，它仍然可以工作。https://jsfiddle.net/ay4ax3nz/1/ - cngodles

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

您可以使用jQuery的:has()选择器来选择具有br后代元素的div元素：

$('div:has(br)').filter(function() {
  return !this.textContent.trim();
}).remove();

正如您在问题中提到的那样，如果您只想在 br 元素是唯一子元素时删除 div 元素，则可以与 :only-child 选择器结合使用:

$('div:has(br:only-child)').filter(function() {
  return !this.textContent.trim();
}).remove();

如果可以有多个 br 元素，那么显然不应该使用 :only-child。更好的方法是检查非 br 元素的同级元素长度。

$('div:has(>br)').filter(function() {
  return !this.textContent.trim() && !$('br', this).siblings(':not(br)').length;
}).remove();

在上面的查询中，如果div元素没有包含任何文本并且只有后代br元素，则将其删除。正如评论中所述，如果您只想检查直接后代的br元素，请在初始选择器中也使用子组合器>。

如何选择并删除一个 div 元素，当它不包含文本，只有 <br> 元素时？