javascript - 如果另一个元素为空，如何动态隐藏 html 元素

Question

如果所述 div 为空，我想将标题隐藏在 div 上方。content div 的内容会因用户输入而改变。我希望点击按钮后 heading1 立即出现。

我更喜欢 css 解决方案，但我已经在页面上使用 jquery 和大量 javascript，所以我对所有解决方案持开放态度。

可以给所有的标题一个唯一的 ID，如果这样更容易的话

function addcontent()
{
document.getElementById("Content1").innerHTML = "Extra Content";
}

	$(".rulescontent:empty").parent().hide();
	$(!".rulescontent:empty").parent().show();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>heading1</h1>
  <div  style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>
		
<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>
    
<button  type='button' onclick="addcontent()">add content</button>

其他 Stakcoverflow 解决方案也不会让内容不再为空后重新出现。

Answer 1

您需要创建一个函数并在将内容附加到您的 div 时调用它

function addcontent() {
  document.getElementById("Content1").innerHTML = "Extra Content";
  toggleEmpty()
}

function toggleEmpty() {
  $(".rulescontent:empty").parent().hide();
  $(".rulescontent:not(:empty)").parent().show();
}
toggleEmpty()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>heading1</h1>
  <div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>

<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>

<button type='button' onclick="addcontent()">add content</button>