Показать кнопку при вводе текста в input

Question

Как сделать, чтобы при вводе текста в поле появлялась кнопка очистить? А при пустом поле была скрыта.

document.getElementById("clear-from").onclick = function(e) {
  document.getElementById("from").value = ""; 
  e.preventDefault();
}
document.getElementById("clear-to").onclick = function(e) {
  document.getElementById("to").value = "";
  e.preventDefault();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="input-field col s12">
    <input id="from" name="from" type="text" value="" class="input-val" required>
    <button id="clear-from" class="waves-effect clear">X</button>
</div>
<div class="input-field col s12">
    <input id="to" name="to" type="text" value="" class="input-val" required>
    <button id="clear-to" class="waves-effect clear">X</button>
</div>

Answer 1

Можно так реализовать

document.querySelectorAll('.input-val').forEach(input => {
  const button = input.nextElementSibling;
  input.addEventListener('input', () => {
    if (input.value) {
      button.style.display = 'inline-block';
    } else {
      button.style.display = 'none';
    }
  });

  button.addEventListener('click', () => {
    input.value = '';
    button.style.display = 'none';
  });
});

.clear {
  display: none;
}

<div class="input-field col s12">
  <input id="from" name="from" type="text" value="" class="input-val" required>
  <button id="clear-from" class="waves-effect clear">X</button>
</div>
<div class="input-field col s12">
  <input id="to" name="to" type="text" value="" class="input-val" required>
  <button id="clear-to" class="waves-effect clear">X</button>
</div>

Answer 2

Как сделать, чтобы при вводе текста в поле появлялась кнопка очистить? А при пустом поле была скрыта.

Такое можно сделать, например, вот так...

$('main').on('input', e => {
  const o = $(e.target)
  const act = o.val() === '' ? 'addClass' : 'removeClass'
  o.parent().find('button')[act]('off')
})
$('main').on('click', 'button', e => {
  $(e.target).addClass('off').parent().find('input').val('')
})

.input-field button.off {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<main>
  <div class="input-field col s12">
      <input id="from" name="from" type="text" value="" class="input-val" required>
      <button id="clear-from" class="waves-effect clear off">X</button>
  </div>
  <div class="input-field col s12">
      <input id="to" name="to" type="text" value="" class="input-val" required>
      <button id="clear-to" class="waves-effect clear off">X</button>
  </div>
</main>

Answer 3

Ну раз уж jQuery, то jQuery:

$("body").on("input", "input", function (e) {
  var $target = $(e.target)
  $target.toggleClass("filled", !!$target.val())
}).on("click", "[data-clear]", function (e) {
  var $target = $(e.target)
  $($target.data("clear")).val("").removeClass("filled")
})

[data-clear] {
  display: none;
}

.filled + [data-clear] {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="input-field col s12">
    <input id="from" name="from" type="text" value="" class="input-val" required>
    <button data-clear="#from" class="waves-effect clear">X</button>
</div>
<div class="input-field col s12">
    <input id="to" name="to" type="text" value="" class="input-val" required>
    <button data-clear="#to" class="waves-effect clear">X</button>
</div>

Или так:

$("body").on("input", "input", function (e) {
  var $target = $(e.target)
  $("[data-clear='" + $target.prop('id') + "']").toggle(!!$target.val())
}).on("click", "[data-clear]", function (e) {
  var $target = $(e.target)
  $("#" + $target.data("clear")).val("").trigger("input")
})

[data-clear] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="input-field col s12">
    <input id="from" name="from" type="text" value="" class="input-val" required>
    <button data-clear="from" class="waves-effect clear">X</button>
</div>
<div class="input-field col s12">
    <input id="to" name="to" type="text" value="" class="input-val" required>
    <button data-clear="to" class="waves-effect clear">X</button>
</div>

PS: Обращаю внимание на атрибут data-clear и то, что в двух моих примерах он заполнен по-разному.

БЛОГ НА HUSL

Показать кнопку при вводе текста в input

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