I have a page where some div has content and some are having only BR tag, I am trying to remove the div that div has only BR tag, following is the html format

Some are like this

<div>
  <br>
</div>

And Some are like this

<div>
  <br>
  Text goes here text goes here..Text goes here text goes here.. Text goes here text goes here..
</div>

As I know I can find the blank div and remove it easily but hard to check the inner BR tag and remove, can somebody please help!

I tried to check blank div like this

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

I have a page where some div has content and some are having only BR tag, I am trying to remove the div that div has only BR tag, following is the html format

Some are like this

<div>
  <br>
</div>

And Some are like this

<div>
  <br>
  Text goes here text goes here..Text goes here text goes here.. Text goes here text goes here..
</div>

As I know I can find the blank div and remove it easily but hard to check the inner BR tag and remove, can somebody please help!

I tried to check blank div like this

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

• javascript
• jquery
• html

• have you tried .html() for that div? – Mehravish Temkar Commented Nov 23, 2016 at 12:06

5 Answers 5

:empty selector will not work as the div has br element.

You can use .filter() to get all div element which has no text() then remove() can be used.

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <br>Text goes here text goes here..Text goes here text goes here.. Text goes here text goes here..
</div>
<div>
  <br>
</div>

Use jQuery.filter and test the textContent of element!

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <br>
</div>

<div>
  <br>Text goes here text goes here..Text goes here text goes here.. Text goes here text goes here..
</div>

Use $("div").text().trim()

Example Snippet:

if ($("div").text().trim() === "") {
  $("div").html("hellk")
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <br>
</div>

Pure-JS solution: find all BR elements that are the only children of their parent DIVs and then iterate over the resulting collection and remove parent element of each BR element if the parent doesn’t contain non-whitespace text:

var brElements = document.querySelectorAll('DIV > BR:first-child:last-child');

Array.from(brElements).forEach(function(br) {
    var div = br.parentNode;

    if (0 === div.textContent.trim().length) {
        div.parentNode.removeChild(div);
    }
});

// For older browsers not supporting `Array.from(arrayLike)`,
// use `Array.prototype.slice.call(arrayLike, 0)`.

This is also potentially faster than filtering all DIV elements in the document.

$('div').each(function(){
    if($(this).text.trim().length == 0) {
        $(this).remove();
    }
})