Как остановить клонирование элементов?

Question

Как остановить клонирование элементов когда их количество достигнет например 3? https://jsfiddle.net/z2o9u0kb/7/

<button class="add-shape-btn">Add shape</button>

<div class="box__row box__row--1">
  <div class="shape shape--other"></div>
</div>
<div class="box__row box__row--2">
  <div class="shape shape--default"></div>
</div>

const buttonAdd = document.querySelector('.add-shape-btn')
const parentOther = document.querySelector('.box__row--1')
const parentDefault = document.querySelector('.box__row--2')
const shapeOther = document.querySelector('.shape--other')
const shapeDefault = document.querySelector('.shape--default')

buttonAdd.addEventListener('click', function() {
  let cloneOther = shapeOther.cloneNode()
  parentOther.appendChild(cloneOther)

  let cloneDefault = shapeDefault.cloneNode()
  parentDefault.appendChild(cloneDefault)
})

Answer 1

if (document.querySelectorAll('.shape--other').length > 2)
  return;

Answer 2

В данном случае, можно просто использовать свойство children родительских элементов, проверяя размер коллекции (то есть, количество непосредственно дочерних элементов):

buttonAdd.addEventListener('click', function() {
  const childCount = Math.max(parentOther.children.length, parentDefault.children.length); 
  if (childCount < 3) {
    parentOther.appendChild(shapeOther.cloneNode()); 
    parentDefault.appendChild(shapeDefault.cloneNode()); 
  }
});

Или, можно считать нажатия кнопки (сохраняя значение счетчика, например, в ее data-атрибуте):

buttonAdd.addEventListener('click', function(evt) {
  const clickCount = evt.target.dataset.clicks = ~~evt.target.dataset.clicks + 1;
  if (clickCount < 3) {
    parentOther.appendChild(shapeOther.cloneNode()); 
    parentDefault.appendChild(shapeDefault.cloneNode()); 
  }
});

Answer 3

Сделал вот так

let count = 1
buttonAdd.addEventListener('click', function() {
    let cloneOther = shapeOther.cloneNode()
    let cloneDefault = shapeDefault.cloneNode()

    if(count++ < 4) {
        parentOther.appendChild(cloneOther)
        parentDefault.appendChild(cloneDefault)
    }
})

БЛОГ НА HUSL

Как остановить клонирование элементов?

Ответы (3 шт):