Question

I’m trying to remove all empty elements inside a div and found a solution however, it’s using CSS3 selectors and I’m pretty sure it’s not cross browser. Here is what I have working on FF:

$("#container *:empty:not(img)").remove();

Answer 1

…it’s using CSS3 selectors and I’m pretty sure it’s not cross browser.

It is, because jQuery handles that for you, via its Sizzle selector engine; more.

If you want to do it without using :empty, it’s a fairly straight-forward recursive function (not using jQuery, to avoid creating large arrays in memory):

function removeEmpties(node) {
  var child, sibling;

  for (child = node.lastChild; child; child = sibling) {
    sibling = child.previousSibling;
    switch (child.nodeType) {
      case 1: // Element
        if (child.nodeName !== "IMG") { // Assumes HTML, not XHTML
          removeEmpties(child);
          if (!child.firstChild) {
            node.removeChild(child);
          }
        }
        break;
      case 3: // Text
        if (child.nodeValue === "") {
          node.removeChild(child);
        }
        break;
    }
  }
}

…or something along those lines. If you want to remove text nodes containing just whitespace, then change

if (child.nodeValue === "") {

to

if (child.nodeValue.replace(/\s/g, '') === "") {

Live Example | Source