Как ограничить количество блоков добавляемых .append?

Question

[Макс Darkleviathan]

Сейчас код такой:

var controls = `<div class='tableTicketLine tableBody'>
    <div class='tableTicketFlex'><input class='inpt'></div>
    <div class='tableTicketFlex'><input class='inpt unlimit' placeholder='∞'></div>
    <div class='tableTicketFlex'><input class='inpt'></div>
    <div class='tableTicketFlex'><input class='inpt'></div>
    <div class='tableTicketFlex'><button class='delButton'><i class='fas fa-trash'></i></button></div>
  </div>`

$('.addButton').click(function() {
    $('.tableTicket').append($(controls));
    
});

Как мне ограничить количество добавлений до 10, при нажатии кнопки с классом addButton?

Answer 1

[Simkav]

Создайте переменную и считайте в ней количество добавлений, или смотреть по количеству детей в tableTicket.

Answer 2

[Stalker_RED]

Вы можете вставлять через each и остановить перебор, когда выполнилось какое-то условие.

let counter = 0;
$('.tableTicket').each((index, elem) => {
  $(elem).append($(controls));
  return counter++ < 10; // break loop when counter is 10
});

Или выбрать только первые десять элементов на уровне селектора:

$('.tableTicket:nth-child(-n+10)').append($(controls));

Comments

[Макс Darkleviathan]

Первый вариант вывел динамически сразу 1 элемент и при click больше ничего не добавляет. В консоли ошибок нет.

Второй же добавляет, но выводит дальше после 10ти

[Stalker_RED]

Макс Darkleviathan, вы хотите добавлять по 10 при каждом клике?

[Макс Darkleviathan]

Вот что выходит jsfiddle

[Макс Darkleviathan]

Нужно по 1 элементу добавлять , но до 10ти

[Stalker_RED]

Макс Darkleviathan,
так?

[Макс Darkleviathan]

Stalker_RED, Да, именно так. Спасибо большое за помощь)))

[Макс Darkleviathan]

Stalker_RED, Еще один момент не пойму. Каунтер же подсчитывает в рамках функции. А как можно передать значение каунтрера со следующей функции?

let counter = 0;
let delcounter = 0;


$('.addButton').click(function() {
  if (counter >= 9) {
    //console.log(counter);
  } else if (counter == 9 && delcounter >= 1) {
    $('.tableTicket').append($(controls));
    counter++;
  } else {
    $('.tableTicket').append($(controls));
    counter++;
  }

});


$('.tableTicket').on('click', '.delButton', function(){
   $(this).closest('.tableBody').remove();
   delcounter++;
});

При нажатии delButton я удаляю блок и добавляю delcounter++.
Не пойму мне перенести это чтоб соблюсти условие

else if (counter == 9 && delcounter >= 1) {
    $('.tableTicket').append($(controls));
    counter++;
  }

[Stalker_RED]

Макс Darkleviathan, что вы вообще пытаетесь сделать?