Question

I want to remove extra whitespace -creating tags (specifically br & p) from a div. The div contents could be following:

<div>
  <br>
  <br>
  something
  <br>
  something
</div>

But in other cases they can also be just fine:

<div>
  something
  <br>
  something
</div>

Solutions described at How to remove the first two BR tags with jquery? work if the BR count is known (e.g. always single br at the beginning). What about if BR amount at the beginning is between 0 and infinite? Also, BR’s at the middle should not be removed.

Looking for something like $.trim for div’s 🙂

Answer 1

The following will remove all duplicating <br> elements (including at the beginning) in the text block:

​$("div"​​​​​​).html(function(i, html) {
    return $.grep(html.split(/<br\s*\/?>/), function(part) {
        return $.trim(part) !== "";
    }).join("<br>");
});

DEMO: http://jsfiddle.net/S8qeb/

This will remove all <br> elements only at the beginning of the text block:

$("div").html(function(i, html) {
    var textFound = false;
    return $.grep(html.split(/<br\s*\/?>/), function(part, i) {
        if ($.trim(part) !== "") textFound = true;
        return textFound;
    }).join("<br>");
});

DEMO: http://jsfiddle.net/S8qeb/1/
​