How to limit the number of clones which can be made

Question

I use clone() and remove() with div elements. How can I make a clone limit? For example, I can clone a maximum of 10 div elements.

$('.wrapper').on('click', '.remove', function() {
  $('.remove').closest('.wrapper').find('.element').not(':first').last().remove();
});
$('.wrapper').on('click', '.clone', function() {
  $('.clone').closest('.wrapper').find('.element').first().clone().appendTo('.results');
});

body {
  padding: 1em;
}
.element {
  background: #eee;
  width: 200px;
  height: 40px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}
.buttons {
  clear: both;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">
  </div>
  <div class="results"></div>

  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

Rory McCrossan · Accepted Answer · 2018-10-17T13:00:58.853

6

To make this work you can check the number of .result .element elements before you clone the next. If the number is at the limit, don't perform the clone action.

Note in the example below that I set the limit to 2 to make testing easier, and also I made some changes to the selectors to make them more succinct.

$('.wrapper').on('click', '.remove', function() {
  $(this).closest('.wrapper').find('.element:not(:first):last').remove();
  setCloneButtonVisibility();
});

var cloneLimit = 2;

$('.wrapper').on('click', '.clone', function() {
  if ($('.results .element').length <= cloneLimit) { // just to make testing easier
    $(this).closest('.wrapper').find('.element:first').clone().appendTo('.results');
  }
  setCloneButtonVisibility();
});

function setCloneButtonVisibility() {
  $('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}

body {
  padding: 1em;
}

.element {
  background: #eee;
  width: 200px;
  height: 40px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}

.buttons {
  clear: both;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element"></div>
  <div class="results"></div>
  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

edited Oct 17 '18 at 13:00

answered Oct 17 '18 at 09:16

Rory McCrossan

331,213
40
305
339

how can hid e clone button when i clone maximum elements – code7772 Oct 17 '18 at 12:40
`$('.wrapper .clone').hide()` – Rory McCrossan Oct 17 '18 at 12:41
Thank you. one question, when in div element i have ,it works and clone it. but if in field i have same text and than make clone it clones field with text, how can it clone filed but value was cleared – code7772 Oct 17 '18 at 14:08
Set `val('')` on the elements after you clone them – Rory McCrossan Oct 17 '18 at 14:17
Not really as your example HTML doesn't show where the `input` elements are. It's really not complicated though: https://stackoverflow.com/questions/9236332/jquery-how-to-empty-input-field – Rory McCrossan Oct 17 '18 at 14:48
ex. if i have like this
– code7772 Oct 17 '18 at 15:31

score 0 · Answer 2 · answered Oct 17 '18 at 09:32

$('.wrapper').on('click', '.remove', function() {
var numItems = $('.element').length;
alert("No of element: "+numItems);
if(numItems>=1){
  $('.remove').closest('.wrapper').find('.element').not(':first').last().remove();
  }
  else{
  alert("There should be at least one element...");
  }
});
$('.wrapper').on('click', '.clone', function() {
var numItems = $('.element').length;
var maxNoDiv=3;//No of max dived could be added in the system
alert("No of element: "+numItems);
if((numItems+1)<=maxNoDiv){
  $('.clone').closest('.wrapper').find('.element').first().clone().appendTo('.results');
  }
  else{
  alert("u cant add more than "+maxNoDiv+" divs...");
  }
});

body {
  padding: 1em;
}
.element {
  background: #eee;
  width: 200px;
  height: 40px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}
.buttons {
  clear: both;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">
  </div>
  <div class="results"></div>

  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

Please take the time to describe what the issues are and why this solution helps. Remember, we're here to educate people, not just dump code on them. — Rory McCrossan, Oct 17 '18 at 10:29

Temani Afif · Answer 3 · 2018-10-17T10:29:36.330

You can consider a CSS selector that will always select the last child to clone and this last child should be within a specific range.

For this you need to adjust the structure and make the element to clone inside the result wrapper:

$('.remove').click(function() {
  $(this).closest('.wrapper').find('.element:not(:first-of-type):last-of-type').remove();
});
$('.clone').click(function() {
  $(this).closest('.wrapper').find('.element:nth-of-type(-n+3):last-of-type').clone().appendTo('.results');
});

body {
  padding: 1em;
}
.element {
  background: #eee;
  width: 200px;
  height: 20px;
  padding: 20px 20px 0;
  text-align: center;
  margin: 5px 0;
}
.element:nth-of-type(-n+3):last-of-type {
  background:red;
}
.buttons {
  clear: both;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="results">
      <div class="element">
      </div>
  </div>

  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

Using nth-of-type(-n+3):last-of-type will select the last child among the 3 first elements, and when we have more this selector will match 0 element and you can no more clone.

How to limit the number of clones which can be made

3 Answers3