时间戳

首页 > 解决方案 > 如果子元素为空，则隐藏 div

javascript - 如果子元素为空，则隐藏 div

问题描述

问题更正：

如果 'li' 内的 ptag 为空，我试图隐藏整个 'li' 块。

p 标签位于类为 aaProfileDataWrapper 的 div 中的“li”内

所以如果那个 p 标签里面没有文本，那么整个 'li' 需要隐藏，包括标签和它持有的任何其他东西。

var divs = $(".aaProfileDataWrapper");

divs.each(function () {
    var div = $(this);

    if (div.next().html() === "<p></p>") {
        div.hide();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="aaProfilePhone">
  <label>Office 2 Phone:</label> 
  <div class="aaProfileDataWrapper">
    <p></p>
  </div>
  <div class="aaInlineValidationWrapper">
    <div class="aaValidationWrapper-Inner">
      <span class="aaInlineValidationIcon"></span>
      <span class="aaValidationTxt"></span>
    </div>
  </div>
</li>

标签： javascripthtmljquery

解决方案

您需要做的就是查询p任何div元素中的所有元素，这些元素的aaProfileDataWrapper类本身就是元素的子li元素。然后，您可以遍历这些p元素，如果它们为空，则隐藏li祖先。

// Loop over all the p elements within the div elements that
// have the right class, that are inside of li elements
$("li div.aaProfileDataWrapper p").each(function (idx, el) {
  // Check the p to see if it's empty
  if ($(el).html() === "") {
    $(el).closest("li").hide();  // Hide the nearest li ancestor
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="aaProfilePhone">
  <label>Office 1 Phone:</label> 
  <div class="aaProfileDataWrapper">
    <p></p>
  </div>
  <div class="aaInlineValidationWrapper">
    <div class="aaValidationWrapper-Inner">
      <span class="aaInlineValidationIcon"></span>
      <span class="aaValidationTxt"></span>
    </div>
  </div>
</li>
<li id="aaProfilePhone">
  <label>Office 2 Phone:</label> 
  <div class="aaProfileDataWrapper">
    <p>something</p>
  </div>
  <div class="aaInlineValidationWrapper">
    <div class="aaValidationWrapper-Inner">
      <span class="aaInlineValidationIcon"></span>
      <span class="aaValidationTxt"></span>
    </div>
  </div>
</li>
</ul>

推荐阅读