CODEWITHSUNDEEP
javascripthtmlcss
Steve
Steve

Reputation: 1672

Applying style to the parent div

I have the following 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>

There is a um-hide-field class. I need to hide this whole div applying to the class. Is this possible?

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

to hide whole div. like near parent div.

Upvotes: 0

Views: 91

Answers (4)

Bhuwan
Bhuwan

Reputation: 16855

You can use javascript to get this...try to use 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>

Or use 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>

Upvotes: 2

CodeZombie
CodeZombie

Reputation: 2087

Using jquery: To hide the parent if the child contains the class .um-hide-field

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

Upvotes: 1

Akshay Mahingade
Akshay Mahingade

Reputation: 21

Try this code for above query: 

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

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 370609

Given the current spec, it's impossible to select "a parent which has a child with this selector". If :has makes its way into the standards, you could do something like

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

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

but it's still being worked on, and is not supported by browsers.

Upvotes: 1

Related Questions