javascript - 将样式应用于父 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>