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

Question

我有一个这样结构的页面

    <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 不同。textarea 的 ID 相同。其他 div 中的按钮不需要隐藏。
请提供使用 js 或 asp.net mvc 工具的解决方案。问我是否有什么不清楚的地方。

Answer 1

请参阅下面的解决方案。由于所有按钮都具有相同的 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>