Закрытие DIV будет закрытием другого связанного ввода

Question

У меня есть несколько классов .tab <span class="tab">Close Tab1</span> <span class="tab">Close Tab2</span> <span class="tab">Close Tab...</span>. У меня также есть входы. Что такое .tab и отношение ввода: <span class="tab">Close Tab1</span> и <input name="Close Tab1" placeholder="Close Tab1">

Цель: Когда я нажимаю на Close Tab1 (красный квадрат), эта вкладка будет скрыта, и ввод Закрыть Tab1 будет тоже скрыт.

Пожалуйста, посмотрите на jsfiddle протяните руку.

$('.tab').click(function() {
	$(this).hide();
  if($('.tab').is(':visible') == false) {
  	$('.message').show();
  }
  
  var MainTabName = $('#main-tabs input').attr('name');
  var bannerTab = $('.tab:contains('+MainTabName+')');
  
})

#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}
.tab {
  
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}
.message {
  display: none;
}
#main-tabs {
  display: grid;
}
input {
  width: 30%;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
  This is a banner message
  </span>
  <span class="tab">Close Tab1</span>
  <span class="tab">Close Tab2</span>
  <span class="tab">Close Tab3</span>
</div>

<p>
<div id="main-tabs">
  <input name="Close Tab1" placeholder="Close Tab1">
  <input name="Close Tab2" placeholder="Close Tab2">
  <input name="Close Tab3" placeholder="Close Tab3">
</div>
</p>

Answer 1

Основная цель c состоит в том, чтобы определить какую-то связь, в которой вкладка знает, какой вход связан с ней. Есть довольно много способов сделать это. Вот только один из них - использование атрибута data-tabantange - на вкладке есть атрибут data, значение которого совпадает с идентификатором ввода. Затем вы можете использовать это для формирования селектора, чтобы скрыть ввод.

$('.tab').click(function() {
  var tab = $(this);
  tab.hide();
  $("#" + tab.data("input")).hide();
  
  if ($('.tab').is(':visible') == false) {
    $('.message').show();
  }

  var MainTabName = $('#main-tabs input').attr('name');
  var bannerTab = $('.tab:contains(' + MainTabName + ')');
});

#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}

.tab {
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}

.message {
  display: none;
}

#main-tabs {
  display: grid;
}

input {
  width: 30%;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
  This is a banner message
  </span>
  <span class="tab" data-input="input1">Close Tab1</span>
  <span class="tab" data-input="input2">Close Tab2</span>
  <span class="tab" data-input="input3">Close Tab3</span>
</div>

<p>
  <div id="main-tabs">
    <input name="Close Tab1" id="input1" placeholder="Close Tab1">
    <input name="Close Tab2" id="input2" placeholder="Close Tab2">
    <input name="Close Tab3" id="input3" placeholder="Close Tab3">
  </div>
</p>

Answer 2

В настоящее время единственной вещью, которая связывает вкладку с входом, является содержимое вкладки, поэтому при минимальном количестве изменений, чтобы заставить это работать, измените JS на следующее:

$('.tab').click(function() {
    $(this).hide();
    $("input[name='" + this.innerHTML + "']").hide();

    if($('.tab').is(':visible') == false) {
        $('.message').show();
    }


    var MainTabName = $('#main-tabs input').attr('name');
    var bannerTab = $('.tab:contains('+MainTabName+')');

})

Но более эффективный способ - это то, как отвечал ADyson.