Wie ein Elternteil div zu verbergen, wenn ein Inner Div eine bestimmte Klasse hat, mit Javascript

Ok also sagen, ich habe viele divs. Einige der divs, die Kinder haben eine Klasse, andere divs die Kinder haben eine andere Klasse.Wie ein Elternteil div zu verbergen, wenn ein Inner Div eine bestimmte Klasse hat, mit Javascript

Ich möchte nur die divs verstecken, die ein Kind mit einer bestimmten Klasse haben.

Zum Beispiel

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

Jetzt oben, lassen Sie uns sagen, dass ich möchte nur die Eltern divs verstecken, die ein Kind div mit der Klasse haben .childB

Dies kann nicht mit CSS gemacht werden Soweit ich weiß (CSS3 sowieso), weil CSS es nicht erlaubt, das Elternteil div, nur ein Kind div. Und die Eltern .mainDiv divs (diejenigen, die ich verstecken möchte) sind alle genau gleich.

So dass Javascript bleibt.

Verwenden Sie das obige Beispiel, wie kann ich alle .mainDiv divs ausblenden, die eine untergeordnete div mit der Klasse .childB enthalten?

Quelle

2016-07-12 agvr3

Sie mit jQuery oder nicht? –

HIDING Geordnetes Element auf seiner direkten Nachkommen basiert

//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";

HIDING Geordnetes Element an seinem Kind-Element basiert.

//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();

Quelle

2016-07-12 01:54:45

nein Ich möchte ein Element mit einem Klassennamen nicht ausblenden. Ich möchte das ** parent ** div verbergen, das * nicht durch den Klassennamen definiert werden kann, da alle Eltern dieselbe Klasse haben. – agvr3

@ agvr3 siehe aktualisierte Hinweise. Der Code verbirgt das Eltern-Div abhängig von der Child-Element-Klasse, die ich in Ihrem Beispiel 'KlasseB' glaube. –

Es ist ** nicht ** ein direkter Nachkomme. Aktualisierte Frage mit mehr Code zur Klärung. – agvr3

Sie können dies mit reinem javascript:

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

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

Oder mit JQuery:

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

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

Quelle

2016-07-12 01:40:37 imazzara

Diese Methode verbirgt nur unmittelbare Eltern. Ich muss einen bestimmten Elternteil verstecken. – agvr3

Ah ok, Sie können verwenden: $ (". ChildB"). Eltern (". MainDiv"). Hide() oder $ (". ChildB"). Am nächsten (". MainDiv"). Hide() – imazzara

Nun können Sie 012 verwendenMethode, um den übergeordneten Knoten der angegebenen untergeordneten Knoten auszuwählen, und verwenden Sie , um die ausgewählten übergeordneten Knoten auszublenden.

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

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

Quelle

2016-07-12 01:40:44

Diese Methode verbirgt nur unmittelbare Eltern. Ich muss einen bestimmten Elternteil verstecken. – agvr3

jQuery verwenden, $('.childA').parent().hide();

Quelle

2016-07-12 01:41:32

dies funktioniert nicht, weil es nur die unmittelbaren Eltern versteckt, aber mein Beispiel wurde vereinfacht; Ich muss es basierend auf der Klasse '.mainDiv' – agvr3

verstecken diese Methode nur unmittelbare Eltern versteckt. Ich muss einen bestimmten Elternteil verstecken. – agvr3

Mit jQuery Sie folgenden Selektor verwenden könnten.Dies wird alle ausblenden mainDiv enthält childB aber nicht mainDiv, die andere Elemente enthalten oder childB ohne mainDiv als Elternteil (in welcher Ebene, durch die Verwendung von closest-https://api.jquery.com/closest/):

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

Fiddle:

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

 
});

.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; 
 
}

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

Quelle

2016-07-12 01:41:56 ClayKaboom

Ich habe das versucht, aber es versteckt '.mainDiv' nicht, es versteckt nur' .childB'. Wie kann ich das ganze '.mainDiv' verstecken, wenn es ein Kind mit der Klasse' .childB' enthält? – agvr3

@ agvr3 antwort aktualisiert – ClayKaboom

wieder dieses neue update nicht verstecken die '.mainDiv' div (wie die andere antwort) aber nur das kind. – agvr3

Ja vascript Methode

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

JQuery Methode

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

Quelle

2016-07-12 01:47:36 nobodyshere

Diese Methode verbirgt nur unmittelbare Eltern. Ich muss einen bestimmten Elternteil verstecken. – agvr3

greifen alle div von mainDiv Klasse und Schleife für jede können Kinder Klasse überprüfen hat spezifische Klasse !!

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"; 
    } 
}

Quelle

2016-07-12 01:47:43

es hat viele Kinder, mein Beispiel wurde vereinfacht, wird das funktionieren, wenn es viele Kinder gibt, aber ich möchte nur verstecken, wenn es ein Kind mit der Klasse '.childB' gibt? – agvr3

versuchte es, funktioniert nicht. – agvr3

Wie ein Elternteil div zu verbergen, wenn ein Inner Div eine bestimmte Klasse hat, mit Javascript

Antwort

Verwandte Themen