jQuery нажмите добавить элементы к серии div

Question

У меня есть следующий код:

$('button').click(function(e) {
  e.preventDefault();

  var count = 0;

  if (count < 5) {
    $(".container .column:nth-child(1)").append('<div class="element"></div>');
    count++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button">Add</button>

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Когда я нажимаю кнопку, я хочу добавить максимум 4 элемента в каждом столбце, один за другим. Например, если я нажму кнопку 6 раз, HTML будет выглядеть следующим образом:

<div class="container">
  <div class="column">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="column">
     <div class="element"></div>
     <div class="element"></div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Это добавляет 1 element div к первому столбцу, каждый раз, когда я нажимаю кнопку, с 4 element предел деления.

Как я могу сделать то же самое для следующих столбцов?

Бонусный вопрос

Можно ли также сделать напротив при нажатии кнопки для удаления элементов?

Answer 1

Вы можете нацелиться на элемент column, проверив число element в нем, используя свойство length.

Кроме того, вам не нужно свойство :nth-child(1).

$('.add').click(function(e) {
  e.preventDefault();
  var count = 0;
  if (count < 5) {
    $(".container .column").filter(function() {
        return $(this).children('.element').length < 4;
      }).first()
      .append('<div class="element">e</div>');
    count++;
  }
});

$('.remove').click(function(e) {
  e.preventDefault();
  $(".container .column .element:last").remove();
});

.column {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="add">Add</button>
<button type="button" class="remove">Remove</button>

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Ссылки:

1. .filter()
2. .first()

Answer 2

Вы можете попробовать этот код:

$('button').click(function(e) {
  e.preventDefault();

  var columns = $(".container .column");
  var added = false;

  for (var i = 0; i < columns.length; i++) {
    if (columns[i].childNodes.length < 4) {
      $(columns[i]).append('<div class="element"></div>');
      added = true;
      break;
    }
  }

  if (!added) {
    console.log('All columns were filled!');
  }
});

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.column {
  flex: 1;
}

.element {
  width: 10px;
  height: 10px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button">Add</button>

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>