Question

这是我的情景：

<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是否包含NO文本并且有一个br标签然后将其删除。

我试过了：

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

我认为这没有用，因为空（）并不意味着没有文字。＆＃34;

我也试过这个：

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

这很有效，但它删除了包含除文本之外的所有div标签，因此删除了div中的所有图像和任何其他html标记。

我尝试过的最后一件事就是这个，但后来意识到这并没有考虑到div中可能存在的文字。

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

我仍然对jquery感到陌生，并为我可能引起的所有人的帮助而道歉。提前致谢！！

Answer 1

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

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

正如您在问题中提到的，如果您只想删除div元素，如果br元素是唯一的子元素，那么您也可以将其与:only-child selector结合使用：

$('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元素，请在初始选择器中使用子组合子>。

Answer 2

检查元素的子元素是否仅<br>，然后检查空文本

$('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();

Answer 3

我使用了find和destroy方法：

https://jsfiddle.net/ay4ax3nz/

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

如果div元素不包含文本且只有元素，如何选择和删除它？

3 个答案: