Jquery добавляется при переносе каждого элемента x

Question

Я пытаюсь создать HTML следующим образом:

<div class="container">
   <div class="wrap">
      <div class="el"></div>
      <div class="el"></div>
      <div class="el"></div>
   </div>
   <div class="wrap">
      <div class="el"></div>
      <div class="el"></div>
      <div class="el"></div>
   </div>
   <div class="wrap">
      <div class="el"></div>
      <div class="el"></div>
      <div class="el"></div>
   </div>
</div>

Компонент, использованный для добавления элемента el:

<input type="text" name="elements" />

el элементы будут добавлены к контейнер, основанный на том, какое число добавлено во вход. Каждые 3 элемента должны быть заключены в wrap div.

Что у меня есть:

$("input[name=elements]").on("keydown keyup", function() {
   var amount = parseInt($(this).val());
   for(i = 0; i < amount; i++) {
     $(".container").append('<div class="el"></div>');
   }
});

Добавляет el div, но я не уверен, как одновременно переносить каждые 3 в wrap. Также возможно ли удалить el divs? Если я скажу, что я сначала наберу 8 во вводе, то я наберу 3, вместо этого будет добавлено 11 делений, имея всего 3. Другими словами, число el делений в HTML всегда должно быть равно число во входном значении. Имеет ли смысл просто сначала очищать HTML для каждого типа ввода?

Answer 1

Вы можете сначала создать массив элементов на основе номера входного значения, добавить его в контейнер, а затем обернуть каждый n-й элемент в wrap элемент.

const container = $('.container')

$("input").on('keyup', function() {
  const val = parseInt($(this).val()) || 0;
  const html = Array.from(Array(val), () => (
    $("<div>", {
      'class': 'el',
      'text': 'element'
    })
  ))

  container.html(html)

  for (let i = 0; i < val; i += 3) {
    container
      .find('.el')
      .slice(i, i + 3)
      .wrapAll("<div class='wrap'></div>");
  }
})

.wrap {
  border: 1px solid green;
  margin: 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div class="container"></div>