title: Empty elements in XSL - Nesting Problems
body: <p>How would I prevent empty elements in XSL from nesting into each other?</p>
  
  <p>I have a portion of my xsl that looks like this</p>
  
  <pre><code>     &lt;div class="social-share"&gt;
          &lt;div class="twitter-icon" data-url="{link}" data-text="{title}"&gt;&lt;/div&gt;
          &lt;div class="facebook-icon" data-url="{link}" data-text="{title}"&gt;&lt;/div&gt;
          &lt;div class="linkedin-icon" data-url="{link}" data-text="{title}"&gt;&lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>The javascript at the beginning of the file pulls in APIs related to these social media links, so they are intentionally empty. However, leaving these empty will result in the following structure which I do not want.</p>
  
  <pre><code>     &lt;div class="social-share"&gt;
          &lt;div class="twitter-icon" data-url="{link}" data-text="{title}"&gt;
          &lt;div class="facebook-icon" data-url="{link}" data-text="{title}"&gt;
          &lt;div class="linkedin-icon" data-url="{link}" data-text="{title}"&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Full XSL</strong></p>
  
  <pre><code>&lt;xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   &gt;
   &lt;xsl:output method="html" indent="yes" 
   doctype-system='http://www.w3.org/TR/html4/strict.dtd'
   doctype-public='-//W3C//DTD HTML 4.01//EN' 
    /&gt;
   &lt;xsl:template match="/rss"&gt;
   &lt;SCRIPT LANGUAGE="javascript" DEFER="true"&gt;
   &lt;xsl:comment&gt;
    &lt;![CDATA[ 
  jQuery(document).ready(function () {
  (function (factory) {
  if (typeof define === 'function' &amp;&amp; define.amd) {
      define(['jquery'], factory);
  } else {
      factory(jQuery);
  }
  }(function ($) {
  $.timeago = function (timestamp) {
      if (timestamp instanceof Date) {
          return inWords(timestamp);
      } else if (typeof timestamp === "string") {
          return inWords($.timeago.parse(timestamp));
      } else if (typeof timestamp === "number") {
          return inWords(new Date(timestamp));
      } else {
          return inWords($.timeago.datetime(timestamp));
      }
  };
  var $t = $.timeago;
  
  $.extend($.timeago, {
      settings: {
          refreshMillis: 60000,
          allowPast: true,
          allowFuture: false,
          localeTitle: false,
          cutoff: 0,
          strings: {
              prefixAgo: null,
              prefixFromNow: null,
              suffixAgo: "ago",
              suffixFromNow: "from now",
              inPast: 'any moment now',
              seconds: "a few seconds",
              minute: "about a minute",
              minutes: "%d minutes",
              hour: "about an hour",
              hours: "about %d hours",
              day: "a day",
              days: "%d days",
              month: "about a month",
              months: "%d months",
              year: "about a year",
              years: "%d years",
              wordSeparator: " ",
              numbers: []
          }
      },
  
      inWords: function (distanceMillis) {
          if (!this.settings.allowPast &amp;&amp; !this.settings.allowFuture) {
              throw 'timeago allowPast and allowFuture settings can not both be set to false.';
          }
  
          var $l = this.settings.strings;
          var prefix = $l.prefixAgo;
          var suffix = $l.suffixAgo;
          if (this.settings.allowFuture) {
              if (distanceMillis &lt; 0) {
                  prefix = $l.prefixFromNow;
                  suffix = $l.suffixFromNow;
              }
          }
  
          if (!this.settings.allowPast &amp;&amp; distanceMillis &gt;= 0) {
              return this.settings.strings.inPast;
          }
  
          var seconds = Math.abs(distanceMillis) / 1000;
          var minutes = seconds / 60;
          var hours = minutes / 60;
          var days = hours / 24;
          var years = days / 365;
  
          function substitute(stringOrFunction, number) {
              var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
              var value = ($l.numbers &amp;&amp; $l.numbers[number]) || number;
              return string.replace(/%d/i, value);
          }
  
          var words = seconds &lt; 45 &amp;&amp; substitute($l.seconds, Math.round(seconds)) || seconds &lt; 90 &amp;&amp; substitute($l.minute, 1) || minutes &lt; 45 &amp;&amp; substitute($l.minutes, Math.round(minutes)) || minutes &lt; 90 &amp;&amp; substitute($l.hour, 1) || hours &lt; 24 &amp;&amp; substitute($l.hours, Math.round(hours)) || hours &lt; 42 &amp;&amp; substitute($l.day, 1) || days &lt; 30 &amp;&amp; substitute($l.days, Math.round(days)) || days &lt; 45 &amp;&amp; substitute($l.month, 1) || days &lt; 365 &amp;&amp; substitute($l.months, Math.round(days / 30)) || years &lt; 1.5 &amp;&amp; substitute($l.year, 1) || substitute($l.years, Math.round(years));
  
          var separator = $l.wordSeparator || "";
          if ($l.wordSeparator === undefined) {
              separator = " ";
          }
          return $.trim([prefix, words, suffix].join(separator));
      },
  
      parse: function (iso8601) {
          var s = $.trim(iso8601);
          s = s.replace(/\.\d+/, "");
          s = s.replace(/-/, "/").replace(/-/, "/");
          s = s.replace(/T/, " ").replace(/Z/, " UTC");
          s = s.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
          s = s.replace(/([\+\-]\d\d)$/, " $100");
          return new Date(s);
      },
      datetime: function (elem) {
          var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
          return $t.parse(iso8601);
      },
      isTime: function (elem) {
          return $(elem).get(0).tagName.toLowerCase() === "time";
      }
  });
  var functions = {
      init: function () {
          var refresh_el = $.proxy(refresh, this);
          refresh_el();
          var $s = $t.settings;
          if ($s.refreshMillis &gt; 0) {
              this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis);
          }
      },
      update: function (time) {
          var parsedTime = $t.parse(time);
          $(this).data('timeago', {
              datetime: parsedTime
          });
          if ($t.settings.localeTitle) $(this).attr("title", parsedTime.toLocaleString());
          refresh.apply(this);
      },
      updateFromDOM: function () {
          $(this).data('timeago', {
              datetime: $t.parse($t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title"))
          });
          refresh.apply(this);
      },
      dispose: function () {
          if (this._timeagoInterval) {
              window.clearInterval(this._timeagoInterval);
              this._timeagoInterval = null;
          }
      }
  };
  
  $.fn.timeago = function (action, options) {
      var fn = action ? functions[action] : functions.init;
      if (!fn) {
          throw new Error("Unknown function name '" + action + "' for timeago");
      }
      this.each(function () {
          fn.call(this, options);
      });
      return this;
  };
  
  function refresh() {
      var data = prepareData(this);
      var $s = $t.settings;
  
      if (!isNaN(data.datetime)) {
          if ($s.cutoff == 0 || Math.abs(distance(data.datetime)) &lt; $s.cutoff) {
              $(this).text(inWords(data.datetime));
          }
      }
      return this;
  }
  
  function prepareData(element) {
      element = $(element);
      if (!element.data("timeago")) {
          element.data("timeago", {
              datetime: $t.datetime(element)
          });
          var text = $.trim(element.text());
          if ($t.settings.localeTitle) {
              element.attr("title", element.data('timeago').datetime.toLocaleString());
          } else if (text.length &gt; 0 &amp;&amp; !($t.isTime(element) &amp;&amp; element.attr("title"))) {
              element.attr("title", text);
          }
      }
      return element.data("timeago");
  }
  
  function inWords(date) {
      return $t.inWords(distance(date));
  }
  
  function distance(date) {
      return (new Date().getTime() - date.getTime());
  }
  document.createElement("abbr");
  document.createElement("time");
  }));
  
  $('.headline-details').click(function () {
  $(this).closest('.headline-item-small').find('.headline-hover-small').fadeToggle(300);
  });
  
  $('.close-headline').click(function () {
  $(this).closest('.headline-item-small').find('.headline-hover-small').fadeToggle(300);
  });
  
  $('.twitter-icon').sharrre({
  share: {
  twitter: true
  },
  template: '&lt;a class="box" href="#"&gt;&lt;div class="share"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/div&gt;    &lt;div class="count" href="#"&gt;{total}&lt;/div&gt;&lt;/a&gt;',
  enableHover: false,
  enableTracking: true,
  buttons: { twitter: {via: '_JulienH'}},
  click: function(api, options){
  api.simulateClick();
  api.openPopup('twitter');
  }
  });
  $('.facebook-icon').sharrre({
  share: {
  facebook: true
  },
  template: '&lt;a class="box" href="#"&gt;&lt;div class="share"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;   &lt;/div&gt;&lt;div class="count" href="#"&gt;{total}&lt;/div&gt;&lt;/a&gt;',
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
  api.simulateClick();
  api.openPopup('facebook');
  }
  });
  $('.linkedin-icon').sharrre({
  share: {
  pinterest: true
  },
  template: '&lt;a class="box" href="#"&gt;&lt;div class="share"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt; &lt;/div&gt;&lt;div class="count" href="#"&gt;{total}&lt;/div&gt;&lt;/a&gt;',
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
  api.simulateClick();
  api.openPopup('linkedin');
  }
  });
  
  jQuery("abbr.timeago").timeago(); 
  });
    ]]&gt; 
  &lt;/xsl:comment&gt;
  &lt;/SCRIPT&gt;
  &lt;div style="display:inline-block;"&gt;
      &lt;xsl:apply-templates select="channel" /&gt;
  &lt;/div&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="channel"&gt;
  &lt;div style="display:inline-block;"&gt;
    &lt;xsl:apply-templates select="item" /&gt;
  &lt;/div&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="item"&gt;
  &lt;!-- ... --&gt;
   &lt;div class="headline-container"&gt;
   &lt;div class="headline-item-small"&gt;
      &lt;xsl:attribute name="style"&gt;background-image:url('&lt;xsl:value-of select="enclosure/@url" /&gt;');&lt;/xsl:attribute&gt;
      &lt;div&gt;
       &lt;abbr class="timeago"&gt;
       &lt;xsl:attribute name="title"&gt;&lt;xsl:value-of select="pubDate" disable-output-escaping="yes" /&gt;&lt;/xsl:attribute&gt;
          &lt;xsl:comment&gt;&lt;![CDATA[[if IE]&gt;&lt;![if lte IE 8]&gt;&lt;i class="fa fa-clock-o"&gt;&lt;/i&gt;&lt;![endif]]]&gt;&lt;/xsl:comment&gt;
       &lt;/abbr&gt;
       &lt;div class="headline-details"&gt;.&lt;i class="fa fa-share"&gt;.&lt;/i&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="headline-hover-small"&gt;
       &lt;i class="close-headline fa fa-times"&gt;.&lt;/i&gt;
       &lt;p class="headline-p ellipsis multiline"&gt;&lt;b&gt;Teaser: &lt;/b&gt;&lt;xsl:value-of select="description" disable-output-escaping="yes" /&gt;&lt;/p&gt;
       &lt;div class="social-share"&gt;
          &lt;div class="twitter-icon" data-url="{link}" data-text="{title}"&gt;.&lt;/div&gt;
          &lt;div class="facebook-icon" data-url="{link}" data-text="{title}"&gt;.&lt;/div&gt;
          &lt;div class="linkedin-icon" data-url="{link}" data-text="{title}"&gt;.&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
    &lt;a target="_self"&gt;
    &lt;xsl:attribute name="href"&gt;&lt;xsl:value-of select="link" disable-output-escaping="yes" /&gt;&lt;/xsl:attribute&gt;
     &lt;h3 class="headline-header"&gt;&lt;xsl:value-of select="title" disable-output-escaping="yes" /&gt;&lt;/h3&gt;
     &lt;/a&gt;
     &lt;xsl:comment&gt;&lt;![CDATA[[if IE]&gt;&lt;hr/&gt;&lt;p style="font-size: 0.75em;margin: 0px;padding: 10px;text-align: justify;"&gt;&lt;xsl:value-of select="description" disable-output-escaping="yes" /&gt;&lt;/p&gt;&lt;![endif]]]&gt;&lt;/xsl:comment&gt;
     &lt;/div&gt;
     &lt;!-- ... --&gt;
     &lt;/xsl:template&gt;
   &lt;/xsl:stylesheet&gt;
  </code></pre>