我有以下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。
答案 0 :(得分：2)
尝试以上查询的代码：
um-field field-date > div > div
{
display:none;
}
答案 1 :(得分：2)
您可以使用javascript来获取此信息...尝试使用var hide = document.querySelectorAll(".um-hide-field");
Array.from(hide).forEach(function(elem) {
var div = elem.parentNode.parentNode.parentNode;
div.style.display = "none";
}) javascript
<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>$("input.um-hide-field").closest(".um-field").hide();
或者使用nearest（）jQuery
<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> <div class="row" id="angular_filetrs">
<div class="col-lg-offset-2 col-lg-6">
<wrapper style="margin-left:15%">
<label class="checkbox-inline">
<input type="checkbox" id="chk_deleted" ng-model="Category">Hide Category
</label>
<label class="checkbox-inline">
<input type="checkbox" id="chk_completed" ng-model="SubCategory">Hide Sub Category
</label>
<label class="checkbox-inline">
<input type="checkbox" id="chk_extra" ng-model="Item">Hide Item
</label>
<label class="checkbox-inline">
<input type="checkbox" id="chk_extra" ng-model="SubItem">Hide Sub Item
</label>
</wrapper>
</div>
</div>
<table id="tbl" class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th ng-show="!Category">Category Name</th>
<th ng-show="!SubCategory">Sub Category Name</th>
<th ng-show="!Item">Item Name</th>
<th ng-show="!SubItem">Sub Item Name</th>
<th>Question Type</th>
<th>Question Name</th>
<th>Is Active</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
@{
int counter = 1;
foreach (DataRow row in Model.Rows)
{
<tr>
<td>@row["Question_Id"]</td>
<td ng-show="!Category">@row["CategoryName"]</td>
<td ng-show="!SubCategory">@row["SubCategoryName"]</td>
<td ng-show="!Item">@row["ItemName"]</td>
<td ng-show="!SubItem">@row["SubItemName"]</td>
<td>@row["Question_Type"]</td>
<td>@row["QuestionName"]</td>
@{ if (row["IsActive"].ToString().Equals("true", StringComparison.InvariantCultureIgnoreCase))
{
<td>Yes</td>}
else if (row["IsActive"].ToString().Equals("false", StringComparison.InvariantCultureIgnoreCase))
{
<td>No</td>}
else
{
<td></td>
}
}
<td>
<a href="@Url.Action("Delete", "QuestionMaster", new { @Question_id = row["Question_Id"] })" onclick="return confirm('are you sure you want to delete ?')" data-toggle="tooltip" title="Delete Question"><i class="fa fa-trash fa-lg" aria-hidden="true" style="color:#d9534f"></i></a> |
<a href="@Url.Action("Edit", "QuestionMaster", new { @Question_id = row["Question_Id"] })" data-toggle="tooltip" title="Edit Question"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" style="color:#5cb85c"></i></a> |
<a href="@Url.Action("Details", "QuestionMaster", new { @Question_id = row["Question_Id"] })" style="pointer-events:all" data-toggle="tooltip" title="See Complete Detail of this Question"><i class="fa fa-info fa-lg" aria-hidden="true" style="color:#5bc0de"></i></a>
</td>
</tr>
counter = counter + 1;
}
}
</tbody>
</table>
答案 2 :(得分：1)
鉴于目前的规范，不可能选择一个有这个选择器的孩子的父母＆＃34;。如果:has进入标准，您可以执行类似
.um-field:has(.um-hide-field)
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
但它仍然有效，浏览器也不支持。
答案 3 :(得分：1)
使用jquery：如果子项包含类.um-hide-field
$(".um-field .um-hide-field").parents('div.um-field').hide();