Materialize input field in Apps Script - Updating/hiding label

I'm using materialize input fields in Google Apps Script UI. I want to have input fields hidden on launch of the form and only become visible once a control (button or drop down) is changed.

I'm hiding the fields using .style.display='none' which is working fine to hide the input field however the default label text still appears. I need to hide that as well. I'm not sure how to change the label text. I tried .label ="" and .textcontent = "" but not working. In the materialize documentation it says after making changes you need to use M.updateTextFields(); to refresh which I did but it doesn't change anything.

           <div class="input-field col s12">
            <input id="aname1" type="text" class="validate">
            <label for="aname1">Client 1</label>
      </div>

        <div class="input-field col s12">
            <input id="aname2" type="text" class="validate">
            <label for="aname2">Client 2</label>
      </div>

      <?!=staff?>


<div class="input-field col s12">
        <button class="btn waves-effect waves-light" id="btn">Submit
        <i class="material-icons right">send</i>
        </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<script>

var drop = document.addEventListener('DOMContentLoaded', function() {

var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);

});

  var clientNameBox = document.getElementById("cname");
  var accountNameBox = document.getElementById("aname");
  var clientNameBox1 = document.getElementById("aname1");
  var clientNameBox2 = document.getElementById("aname2");
  var dropRateBox = document.getElementById("drop");


  clientNameBox1.label='';
  clientNameBox1.textContent = '';

  clientNameBox1.style.display='none'


    M.updateTextFields();

Appreciate any thoughts on how to fix this.