如何在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>

---

您parent().hide()不起作用，因为它选择.second，不.first。也有.parents()选择所有的父母，所以它会是.parents().eq(1).hide()