how to hide label if span content is empty

Question

HTML. My code looks like:

<p class="left" style="margin-top: 0.5em;">
<span class="left">8. 1. pamatslimība</span>
<span style="float: right">
    <i data-openehr-field="/content[at0001]/items[lv.softdent.clinical::openEHR-EHR-ADMIN_ENTRY.izraksts.v1]/data/items[at0105]/items[at0106]" data-openehr-text-as-value="false" data-openehr-value-transformer="transformIcdTextToOnlyText"></i>
    <span data-openehr-field="/content[at0001]/items[lv.softdent.clinical::openEHR-EHR-ADMIN_ENTRY.izraksts.v1]/data/items[at0105]/items[at0106]" data-tmpl="#square" data-openehr-text-as-value="true"></span>
</span>
</p>

cant find solution how to hide first span(works as label), if second span (values) is emty.

Code is used for creating print page form.

Answer 1

<p class="left" style="margin-top: 0.5em;">
<span class="left hideIfSpanEmpty">8. 1. pamatslimība</span>
<span style="float: right">
    <i data-openehr-field="/content[at0001]/items[lv.softdent.clinical::openEHR-EHR-ADMIN_ENTRY.izraksts.v1]/data/items[at0105]/items[at0106]" data-openehr-text-as-value="false" data-openehr-value-transformer="transformIcdTextToOnlyText"></i>
    <span data-openehr-field="/content[at0001]/items[lv.softdent.clinical::openEHR-EHR-ADMIN_ENTRY.izraksts.v1]/data/items[at0105]/items[at0106]" data-tmpl="#square" data-openehr-text-as-value="true"></span>
</span>
</p>

found solution with javascript

<script type="text/javascript">
function hideIfNextEmpty(el) {
  var text = 'textContent' in document ? 'textContent' : 'innerText';
  if (el.nextElementSibling[text].replace(/\s/g, '').length === 0) {
      el.style.display = 'none';
  }
}

var elements = document.getElementsByClassName("hideIfSpanEmpty");

for (var i = 0; i < elements.length; i++) {
hideIfNextEmpty(elements[i]);
}
</script>