Скрывать элемент если input пуст

Question

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

Как это можно реализовать?

$('input[name="form_text_163"], input[name="form_text_219"], input[name="form_text_220"], input[name="form_text_221"]').on('keyup',function(){
        var $this = $(this),
      val = $this.val();
  
        if(val.length >= 1){
            $('.stroka-2').show(100);
        }else {
            $('.stroka-2').hide(100);
        }
    });

.tabl-stroka {
        display: flex;
        width: 100%;
    
    }

    .tabl-1 input {
        width: 20%;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabl-stroka stroka-1">
                    <input type="text" class="inputtext" name="form_text_163" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_219" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_220" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_221" value="" size="0"><br>
                </div>
                    
                <div class="tabl-stroka stroka-2" style="display: none;">
                    <input type="text" class="inputtext" name="form_text_222" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_223" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_224" value="" size="0"><br>
                    <input type="text" class="inputtext" name="form_text_225" value="" size="0"><br>
                </div>

Answer 1

Например, так:

let inputs = document.querySelectorAll('input');
inputs.forEach(inp => inp.addEventListener('keyup', function() {
      let inputsEmpty = true;
      inputs.forEach(function(inp) {
          inputsEmpty = (inp.value.length !== 0) ? false : inputsEmpty;
        });
        if (!inputsEmpty) {
          $('.stroka-2').show(100);  
        } else {
          $('.stroka-2').hide(100);
        }
      }));

.tabl-stroka {
  display: flex;
  width: 100%;
}

.tabl-1 input {
  width: 20%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabl-stroka stroka-1">
  <input type="text" class="inputtext" name="form_text_163" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_219" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_220" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_221" value="" size="0"><br>
</div>

<div class="tabl-stroka stroka-2" style="display: none;">
  <input type="text" class="inputtext" name="form_text_222" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_223" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_224" value="" size="0"><br>
  <input type="text" class="inputtext" name="form_text_225" value="" size="0"><br>
</div>

Answer 2

let inputs1 = table1.querySelectorAll('input');
inputs1.forEach(inp => inp.addEventListener('keyup', function() {
      let inputsEmpty = true;
      inputs1.forEach(function(inp) {
          inputsEmpty = (inp.value.length !== 0) ? false : inputsEmpty;
        });
        let str = table1.querySelector('.stroka-2');
        if (!inputsEmpty) {
          str.style.display = '';
        } else {
          str.style.display = 'none'
        }
      }));
      
let inputs2 = table2.querySelectorAll('input');
inputs2.forEach(inp => inp.addEventListener('keyup', function() {
      let inputsEmpty = true;
      inputs2.forEach(function(inp) {
          inputsEmpty = (inp.value.length !== 0) ? false : inputsEmpty;
        });
        let str = table2.querySelector('.stroka-2');
        if (!inputsEmpty) {
          str.style.display = '';
        } else {
          str.style.display = 'none'
        }
      }));

.tabl-stroka {
  display: flex;
  width: 100%;
}

.tabl-1 input {
  width: 20%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Таблица 1
<div id='table1'>
  <div class="tabl-stroka stroka-1">
    <input type="text" class="inputtext"        name="form_text_11" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_12" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_13" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_14" value="" size="0"><br>
  </div>
 
  <div class="tabl-stroka stroka-2" style="display: none;">
    <input type="text" class="inputtext" name="form_text_21" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_2" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_23" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_24" value="" size="0"><br>
  </div>
</div>

Таблица2
<div id='table2'>
  <div class="tabl-stroka stroka-1">
    <input type="text" class="inputtext"        name="form_text_11" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_12" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_13" value="" size="0"><br>
    <input type="text" class="inputtext"  name="form_text_14" value="" size="0"><br>
  </div>
 
  <div class="tabl-stroka stroka-2" style="display: none;">
    <input type="text" class="inputtext" name="form_text_21" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_2" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_23" value="" size="0"><br>
    <input type="text" class="inputtext" name="form_text_24" value="" size="0"><br>
  </div>
</div>

БЛОГ НА HUSL

Скрывать элемент если input пуст

Ответы (2 шт):