Как скрыть div с Jquery на основе элементов внутри него

Question

Я хочу использовать jQuery, чтобы скрыть один из элементов ниже, а не его содержимое. Что такое селектор jQuery, который я могу использовать для нацеливания на div, который имеет вход с именем address1?

Что я пытаюсь сделать, это скрыть div с классом .snipcart-input, где он имеет ввод с идентификатором address1

<div class="snipcart-input">
  <input id="address1" type="text" name="address1" class="snipcart-input__input snipcart__font--secondary snipcart__font--bold">
</div>
<div class="snipcart-input">
  <input id="address2" type="text" name="address2" class="snipcart-input__input snipcart__font--secondary snipcart__font--bold">
</div>

Answer 1

Вы можете использовать селектор :has() для достижения того, что вам нужно:

$('.snipcart-input:has(#address1)').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="snipcart-input">
  Address1: 
  <input id="address1" type="text" name="address1" class="snipcart-input__input snipcart__font--secondary snipcart__font--bold">
</div>
<div class="snipcart-input">
  Address2: 
  <input id="address2" type="text" name="address2" class="snipcart-input__input snipcart__font--secondary snipcart__font--bold">
</div>

Answer 2

Вы можете использовать каждый , найти & addClass . each будет перебирать все div с этим классом и find будет вводить это id. Это даст объект, который имеет свойство length. Таким образом, если у этого объекта есть дочерний элемент с указанным требованием, длина будет больше 1. Вы можете использовать hide или addClass, чтобы скрыть элемент

$('.snipcart-input').each(function(i, v) {
  let hasChildrenWithId = $(v).find('input#address1');
  if (hasChildrenWithId.length > 0) {
    $(v).addClass('hide')
  }
})

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="snipcart-input">
  <input id="address1" type="text" name="address1" class="snipcart-input__input snipcart__font--secondary snipcart__font--bold">
</div>
<div class="snipcart-input">
  <input id="address2" type="text" name="address2" class="snipcart-input__input snipcart__font--secondary snipcart__font--bold">
</div>