Question

好的说我有很多div。有些孩子，孩子有一个班级，其他孩子有不同的班级。

我想只隐藏有某个孩子的div。

例如，

<div class="mainDiv">
    <div class="kulkul">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childB">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="kulkul">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="kulkul">
        <div class="childB">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childA">
        </div>
    </div>
</div>

现在，让我们说我只想隐藏具有类.childB

的子div的父div。

据我所知（CSS3无论如何），这不能用CSS完成，因为CSS不允许你设置父div的样式，只允许子div。而父.mainDiv div（我要隐藏的那些）都完全一样。

这样就留下了javascript。

使用上面的示例，如何隐藏包含类.mainDiv的子div的所有.childB div？

7 个答案:

答案 0 :(得分：6)

答案 1 :(得分：4)

答案 2 :(得分：2)

答案 3 :(得分：2)

答案 4 :(得分：1)

答案 5 :(得分：1)

答案 6 :(得分：1)

Answer 1

根据其直系后裔隐藏父母元素

//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB'
var elementToHideList = document.getElementsByClassName("sample-element-to-hide");
for (var i = elementToHideList.length; i--;)
    elementToHideList[i].parentNode.style.display = "none";

根据子元素隐藏父母元素。

//Solution for the OP
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide.
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className.

$('.classB').closest('.mainDiv').hide();

Answer 2

您可以使用纯javascript执行此操作：

＆＃13;

var elementsChildB = document.getElementsByClassName("childB")
for(var i = 0 ; i < elementsChildB.length ; i++){
  elementsChildB[i].parentNode.style.display = "none" ; 
}

＆＃13;

<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

<div class="mainDiv">
    <div class="childB">
      b
    </div>
</div>

<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

<div class="mainDiv">
    <div class="childB">
      b
    </div>
</div>

<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

＆＃13;

或者使用Jquery：

＆＃13;

$(".childB").parent().hide()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

<div class="mainDiv">
    <div class="childB">
      b
    </div>
</div>

<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

<div class="mainDiv">
    <div class="childB">
      b
    </div>
</div>

<div class="mainDiv">
    <div class="childA">
      a
    </div>
</div>

＆＃13;

Answer 3

使用jQuery，您可以使用以下选择器。这将隐藏包含mainDiv但不包含childB但包含其他元素的mainDiv或childB没有mainDiv作为其父级（在任何级别，使用中） closest - https://api.jquery.com/closest/）：

 $(".childB").closest(".mainDiv").hide();

小提琴：

＆＃13;

$(function() {
  $(".childB").closest(".mainDiv").hide();

});

＆＃13;

.childB {
  background-color: red;
  border: 1px solid black;
  height: 50px;
  margin-left:20px;
}
.childA {
  background-color: green;
  border: 1px solid black;
  height: 50px;
  margin-left:10px;
}

.mainDiv {
  background-color: yellow;
  border: 1px solid black; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
  <div class="childA">
  </div>
</div>

<div class="mainDiv">
  <div class="childA">
  </div>
</div>

<div class="mainDiv">
  <div class="childB">
  </div>
</div>

<div class="mainDiv">
  PARENT
  <div class="childA">Don't hide
  </div>
</div>

<div class="mainDiv">
  PARENT
  <div class="childB">To be hidden
  </div>
</div>


<div class="mainDiv">
  This contains a child A which contains a child B: <br />
  <div class="childA">It is a child A
    <div class="childB">To be hidden
    </div>

  </div>
</div>

<div class="mainDiv">
  <div class="childA">
  </div>
</div>

<div class="childB">Should not be hidden
</div>

＆＃13;

Answer 4

Javascript方法

var childB = document.getElementsByClassName("childB");
for(var e = 0; e <= childB.length; e++){
  childB[e].parentNode.style.display = "none"; 
}

JQuery方法

$('.childB').parent().hide();

Answer 5

好吧，您可以使用.parent()方法选择指定子节点的父节点，并使用.hide()隐藏选定的父节点。

＆＃13;

$('.childB').each(function() {
  $(this).parent().hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mainDiv">
  <div class="childA">
    A
  </div>
</div>

<div class="mainDiv">
  <div class="childA">
    A
  </div>
</div>

<div class="mainDiv">
  <div class="childB">
    B
  </div>
</div>

<div class="mainDiv">
  <div class="childA">
    A
  </div>
</div>

<div class="mainDiv">
  <div class="childB">
    B
  </div>
</div>

<div class="mainDiv">
  <div class="childA">
    A
  </div>
</div>

＆＃13;

Answer 6

使用jQuery，$('.childA').parent().hide();

Answer 7

抓取所有div的mainDiv类和循环，每个可以检查子类有特定的类!!

var main = document.getElementsByClassName("mainDiv");
for(var i = 0; i < main.length ; i++){
    if(main[i].children[0].classList[0] == "childB"){ //assure only has one children
        main[i].style.display = "none";
    }
}

如果内部div具有某个类，使用javascript，如何隐藏父div

7 个答案: