jQuery click append elements to series of divs

Question

I have the following code:

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

  var count = 0;

  if (count < 5) {
    $(".container .column:nth-child(1)").append('');
    count++;
  }
});

When I click the button I want to add 4 elements maximum in each column, one by one. For example if I click the button 6 times, the HTML will look like this:

This adds 1 element div to the first column, each time I click a button, with a 4 element div limit.

How can I do the same for the next columns?

Bonus Question

Is it possible to also do the opposite when clicking a button to remove elements?

user_1668533 · Answer

You can target the column div by checking the no of elements in it using the length property.

Additionally, You don't need :nth-child(1) property.

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

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

.column {
  border: 1px solid red;
}

References:

user_7616528 · Answer

You can try this code:

$('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('');
      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;
}

jQuery click append elements to series of divs

2 Answers