Wie versteckt man eine Hierarchie des Eltern-Kindes in jquery?

Question

Ich habe eine Hierarchie von Divs und es gibt ein Eingabefeld mit einem eindeutigen Namen Attribut.

$(document).ready(function(){ 
 
    $(".first > input[name='inp']").hide(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="first"> 
 
    First 
 
    <div class="second"> 
 
    Second 
 
    <label for="inp">Label Input</label> 
 
    <input type="text" name="inp" /> 
 
    </div> 
 
</div>

Ich brauche die div erste zu verstecken, wenn es jede Eingabe Kind mit diesem spezifischen eindeutigen Namen hat.

habe ich diese Wähler input[name='inp'] für die Eingabe, Wie kann ich nun die ganzen ersten div entfernen, parent().hide() entfernt nur den ersten Elternteil.

Hinweis: Es gibt mehrere divs mit demselben Klassennamen, daher kann ich Klassenselektor nicht verwenden.

Answer 1

Verwendung :has() Selektor wählt alle Elemente, die ein oder mehrere Elemente im Inneren von ihnen haben, dass die angegebenen Selektor entspricht .:

$(document).ready(function(){ 
 
    $(".first:has(input[name='inp'])").hide() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="first"> 
 
    First 
 
    <div class="second"> 
 
    Second 
 
    <label for="inp">Label Input</label> 
 
    <input type="text" name="inp" /> 
 
    </div> 
 
</div>

Answer 2

zunächst alle Eingänge wählen, dann ist es die Eltern verstecken .

$(document).ready(function() { 
 
    $("input[name='inp']").closest('.first').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="first"> 
 
    First 1 
 
    <div class="second"> 
 
    Second 
 
    <label for="inp">Label Input</label> 
 
    <input type="text" name="inp" /> 
 
    </div> 
 
</div> 
 
<div class="first"> 
 
    First 2 
 
    <div class="second"> 
 
    Second 
 
    <label for="inp">Label Input</label> 
 
    <input type="text" name="inp" /> 
 
    </div> 
 
</div> 
 
<div class="first"> 
 
    First 3 
 
    <div class="second"> 
 
    Second 
 
    <label for="inp">Label Input</label> 
 
    <input type="text" name="inp3" /> 
 
    </div> 
 
</div>

---

Ihre parent().hide() nicht funktioniert, weil es .second auswählt, nicht .first. Es gibt auch .parents(), um alle Eltern auszuwählen, so wäre es .parents().eq(1).hide()