如果特定页面结构上的文本为空，则隐藏按钮

如何解决如果特定页面结构上的文本为空，则隐藏按钮

我的页面具有这样的结构

    <div id=0>
    ...
       <textarea id=sometext></textarea>
       ...
          <button class="coolbutton"></button>
       ...
    ...
    </div>
    <div id=1>
    ...
       <textarea id=sometext></textarea>
       ...
          <button class="coolbutton"></button>
       ...
    ...
    </div>
    <div id=2>
    ...
       <textarea id=sometext></textarea>
       ...
          <button class="coolbutton"></button>
       ...
    ...
    </div>

当此div中的textarea为空时，我只需要在第一个div（id = 0）中隐藏按钮。请注意，只有div ID有所不同。 textareas的ID相同。其他div中的按钮不需要隐藏。
请提供使用js或asp.net mvc工具的解决方案。问我是否不清楚。

解决方法

请在下面查看我的解决方案。由于所有按钮的ID都相同，因此您可以使用childNodes来定位第一个div中的空白文本区域。

如果textarea中的第一个div1为空，则隐藏其第二个子节点button。

该代码段带有注释以供解释。

//Declare div one using childNodes
  var div1 = document.getElementById("0").childNodes;
  
  //Target second child of div using index [1]
  //The second child of the first div is the empty text area
  if (div1[1].innerHTML === "") {
  //If the text area is empty then hide the button
  div1[3].style.display = "none";
  }

<div id="0">
       <textarea id="sometext"></textarea>
          <button class="coolbutton">Click</button>
    </div>
    <div id="1">
       <textarea id="sometext">some text</textarea>
          <button class="coolbutton">Click</button>
    </div>
    <div id="2">
       <textarea id="sometext">some text</textarea>
          <button class="coolbutton">Click</button>
    </div>