jqueryで親子の階層を隠すには？

Question

私はdivの階層を持ち、一意の名前属性を持つ入力ボックスがあります。

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

私はそれが特定の一意の名前で任意の入力の子供を持っている場合は、最初ののdiv を非表示にする必要があります。

私は入力のために、このセレクタinput[name='inp']を使用し、どのように私は今、全体最初のdivを削除するには、parent().hide()は最初の親を削除します。

注：同じクラス名を持つ複数のdivがあるため、クラスセレクタは使用できません。

Answer 1

使用:has()セレクタ、指定したセレクタに一致する、それらの内部に一つ以上の要素を持つすべての要素を選択：

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

まずその親を隠し、その後、すべての入力を選択。

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

---

それは.second、ない.firstを選択したのであなたのparent().hide()、動作しません。底部または他の方法で回避 - それは.parents().eq(1).hide()