问题描述
我的页面具有这样的结构
<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>