Как выбрать следующий за нужным элемент?

[sergei8550]

Есть такой код:
<div class="field">
  <input type="text" id ="email" name="email">
  <label for="email" id="label_email">Введите Email</label>
</div>
<div class="field">
  <input type="text" id ="namel" name="name">
  <label for="name" id="label_name">Введите ваше имя</label>
</div>
<div class="field">
  <input type="text" id ="country" name="country">
  <label for="country" id="label_country">Введите страну</label>
</div>
<div class="field">
  <input type="text" id ="city" name="city">
  <label for="city" id="label_city">Введите город</label>
</div>
<script>
   var input = document.getElementsByTagName('input;)

  for (i = 0; i < input.length; i++) {
input.onclick???? . focus????  = function {
...  Где-то там есть if (this.id = id инпута) {
  то this.input и как-то выбрать следующий лейбл за ним.. чтоб он в заполненном поле не появлялся.. 
Нужно чтоб при получении фокуса, лейбл с поля инпута исчезал, конечно можно placeholderОМ сделать это, но там нюансы есть, и надо именно label в абсолютной позиции делать. Что-то запутался очень очень.. помогите пожалуйста сложить куски мозаики... 

[sergei8550]

Короче смотри Серега. Вот твой код, я вчера как раз в нем разобрался 

var input = document.querySelectorAll('input');

for (i = 0; i < input.length; i ++) {
  input.onfocus = function() {
  this.nextElementSibling.style.opacity = "0";
  } 
  input.onblur = function() {
  if (this.value === "") {
  this.nextElementSibling.style.opacity ="1";
  } else {
  this.nextElementSibling.style.opacity ="0";
  }
  }
}

Я вообще с добавлением классов делал, если пустой то класс с прозрачностью 1, если полный с 0. Но так тоже по идее должно работать.

Edited April 9, 2017 by sergei8550