title: Recursively remove empty nodes from html
body: <p>I'd like to remove empty elements from some html string. I know I could run something like:</p>
  
  <pre><code>$('p').each(function(index, item) {
      if($.trim($(item).text()) === "") {
          $(item).remove();
      }
  });
  </code></pre>
  
  <p>The problem is that I want to remove all empty nodes - not only p. Also I want the script to consider p node in <code>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;</code> as empty because it contains only empty elements. Do you have some simple implementation of something like that?</p>
  
  <p>[EDIT]
  I forgot to add: I can use jQuery but the html I want to traverse and edit is in a string - not the actual document. So how can I do this operation? I tried using <code>var html = $.parseHTML('&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;')</code> but after each loop I still get the same string...</p>