Сдвинуть текст по кнопке

Question

Нужно по кнопке сдвигать текст и чтобы левая часть скрывалась.

.wrapper {
  display: flex;
  justify-content: center;
}

<div class='wrapper'>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
  <button>Button</button>
</div>

Спасибо.

Answer 1

UPD Вот вариант с возможностью удалять и добавлять спаны с цифрами:

let hideShow = function() {
  let i = $('span').length;
  $('.hide').click(function(){ 
    if(i == 0) return;
    $('span:last-of-type').remove();
    i--;
  });
  $('.show').click(function(){
    i++;
    $('.wrapper>div').append('<span>'+i+'</span> ');
  })
}
hideShow();

.wrapper {
  display: flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
  <button class="hide">Скрыть</button>
  <button class="show">Показать</button>
</div>

Так?

$('button').click(function(){
    $('span:first-of-type').remove();
});

.wrapper {
  display: flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
  <button>Button</button>
</div>

БЛОГ НА HUSL

Сдвинуть текст по кнопке

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