将样式应用于父 div

Question

我有以下html：

<div class="um-field field-date">
  <p class="form-row " id="date_field">
    <label class="date">
      <input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080645"> Date
    </label>
  </p>
</div>

有一个um-hide-field类。我需要隐藏适用于该类的整个div。这可能吗？

.um-hide-field {
  display:none;
} 

隐藏整个div。 就像靠近父div 一样。

Answer 1

你可以使用 javascript 来获取这个...尝试使用parentNode JavaScript

var hide = document.querySelectorAll(".um-hide-field");
Array.from(hide).forEach(function(elem) {
  var div = elem.parentNode.parentNode.parentNode;
  div.style.display = "none";
})

<div class="um-field field-date">
  <p class="form-row " id="date_field1">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080645">Date1</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field2">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field" name="date_1521080646" id="date_1521080645">Date2</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field3">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080647">Date3</label>
  </p>
</div>

---

或者使用 closest(( jQuery

$("input.um-hide-field").closest(".um-field").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="um-field field-date">
  <p class="form-row " id="date_field1">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080645">Date1</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field2">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field" name="date_1521080646" id="date_1521080645">Date2</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field3">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080647">Date3</label>
  </p>
</div>

Answer 2

为上面的查询尝试以下代码：

um-field field-date > div > div
    {
        display:none;
    }

Answer 3

鉴于当前的规范，不可能选择"有一个孩子的父母"，这个选择器。如果:has进入标准，你可以做一些类似的事情。

.um-field:has(.um-hide-field)

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

但它仍在开发中，浏览器不支持它。

Answer 4

使用 jquery：如果子级包含类.um-hide-field则隐藏父级

$(".um-field .um-hide-field").parents('div.um-field').hide();