Google Apps Script UI中Materialize输入框的显示隐藏及标签问题

在Google Apps Script UI中使用Materialize输入框，希望表单加载时隐藏输入框，仅在控件（按钮或下拉框）变化后才显示。目前通过style.display='none'成功隐藏了输入框，但默认标签文本仍会显示，需要同时隐藏标签。尝试用.label = ''和.textContent = ''修改标签文本无效，调用M.updateTextFields()刷新也没有效果，求解决思路。

代码片段 #

HTML结构 #

<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>
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});
</script>

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();

问题截图 #

解决思路 #

• 直接隐藏整个输入容器：Materialize的输入框和标签是包裹在.input-field容器里的，直接隐藏这个容器就能同时隐藏输入框和标签，不用单独操作两个元素。

  // 获取aname1对应的容器
  var inputContainer1 = document.getElementById("aname1").parentNode;
  inputContainer1.style.display = 'none';
  

• 单独隐藏标签元素：如果不想隐藏整个容器，需要精准获取对应的<label>标签再隐藏，之前的错误是操作了输入框元素而不是标签元素。

  // 获取对应aname1的标签
  var label1 = document.querySelector("label[for='aname1']");
  label1.style.display = 'none';
  // 同时隐藏输入框
  clientNameBox1.style.display = 'none';
  

• 用Materialize内置类控制显示/隐藏：给容器添加hide类（Materialize内置的隐藏类），后续需要显示时移除该类即可，更符合框架使用规范。

  // 隐藏容器
  var inputContainer1 = document.getElementById("aname1").parentNode;
  inputContainer1.classList.add('hide');
  // 显示容器时执行
  // inputContainer1.classList.remove('hide');
  

内容的提问来源于stack exchange，提问作者Sherif