Настроить кнопку на очистку input

Question

Покажите как изменить код скрипта, чтобы при нажатии на кнопку очищалось не только поле input, но и переданный из него текст?

Если ввести текст в input. то он дублируется в тег p, при стирании текста с клавиатуры текст из тега p нормально удаляется, а при нажатии кнопки "очистить" очищается только input

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="demo">Text, text, text</p>
<div class="inputS" id="sam">
  <input type="text" placeholder="Введите свой текст..." data-default="Text, text, text" />
</div>
<div onClick="resetAllValues();">
  <p>очистить</p>
</div>

<script>
  $(function() {
    let textRenew = function textRenew(val, id) {
      if (id == "sam") {
        $(".demo").text(val)
      }
    };
    let idST = $(".inputS").attr("id");
    $(".inputS input[type=text]").keyup(
      function() {
        if ($(this).val().length != 0) {
          textRenew($(this).val(), idST)
        } else {
          textRenew($(this).data("default"), idST)
        }
      })
  });


  $(document).ready(function() {
    $('.inputS').find('input:text').val('');
  });

  function resetAllValues() {
    $('.inputS').find('input:text').val('');
  }
</script>

Answer 1

Покажите как изменить код скрипта, чтобы при нажатии на кнопку очищалось не только поле input, но и переданный из него текст?

Например вот так можно "очистить" текст...

$(function() {
  let textRenew = function textRenew(val, id) {
    if (id == "sam") {
      $(".demo").text(val)
    }
  };
  let idST = $(".inputS").attr("id");
  $(".inputS input[type=text]").keyup(
    function() {
      if ($(this).val().length != 0) {
        textRenew($(this).val(), idST)
      } else {
        textRenew($(this).data("default"), idST)
      }
    })
  resetAllValues()
});

function resetAllValues() {
  const o = $('.inputS').find('input:text')
  o.val('');
  $('.demo').text(o.data('default'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="demo">Text, text, text</p>
<div class="inputS" id="sam">
  <input type="text" placeholder="Введите свой текст..." data-default="Text, text, text" />
</div>
<div onClick="resetAllValues();">
  <p>очистить</p>
</div>

Answer 2

Если имели ввиду вернуть default текст

...

function resetAllValues() {
    $('.inputS').find('input:text').val('');
    $('.demo').text($('.inputS').find(`[data-default]`).data('default'));
}

БЛОГ НА HUSL

Настроить кнопку на очистку input

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