Как отобразить кнопку если input не пустой?

Question

[Neowaring]

Есть input для ввода текста и 2 кнопки. первая удаляет текст с него а вторая активирует поиск.
Как сделать что бы при пустом input , кнопка удаления текста (span) не отображалась ?

Вот код

<div id="search" class="input-group>
    <input type="text" id="txtsearchinput" name="search" value="" class="form-control" placeholder="Поиск" style="font-size: 15px;height: 37px;">
    <div class="input-group-append" id="button-addon4">

        <!-- Кнопка -->
        <span id="deltxtinput" type="button" style="z-index: 9;"><i class="fa fa-times-circle"></i></span> 
        <!-- Кнопка -->

        <button type="button" style="z-index: 9;"><i class="fa fa-search"></i></button>
    </div>
</div>
<script>
    document.getElementById("deltxtinput").onclick = function (e) {
        document.getElementById("txtsearchinput").value = "";
    }
</script>

Comments

[historydev]

<script>
    document.getElementById("deltxtinput").onclick = function (e) {
        const tsi = document.getElementById("txtsearchinput").value;
        if(tsi != '') console.log('Input not null')
        else console.log('Input null')
    }
</script>

Answer 1

[0xD34F]

.hidden {
  display: none;
}

const searchInput = document.querySelector('#txtsearchinput');
const clearButton = document.querySelector('#deltxtinput');

clearButton.addEventListener('click', function() {
  searchInput.value = '';
  searchInput.dispatchEvent(new Event('input'));
});

searchInput.addEventListener('input', function() {
  clearButton.classList.toggle('hidden', !this.value);
});

Comments

[Сергей delphinpro]

/*.hidden*/
[hidden] /* этоn полифилл уже есть в normalize */ {
  display: none;
}

searchInput.addEventListener('input', function() {
  /* clearButton.classList.toggle('hidden', !this.value); */
  clearButton.hidden = !this.value;
});

[Neowaring]

Скрыть нужно как то SPAN удаления текста при не активированном или при пустом input а не менять скрипт очистки поля

[0xD34F]

Neowaring Stalker, "не активированный input" - это что? Который пользователь не трогал? - пусть тогда у него изначально будет присутствовать класс hidden. Или можно затриггерить событие input.

"Не менять скрипт" - а зачем тогда вы поставили тэг "javascript"? Это как бы предполагает написание кода. Решение без js предложено в одном из соседних ответов.

Answer 2

[Ice]

Предложу вообще не использовать для такой задачи JS
Можно сделать проще, на сss jsfiddle.net/der65cnm