0

Как остановить клонирование элементов когда их количество достигнет например 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)
})

3 ответа 3

1
if (document.querySelectorAll('.shape--other').length > 2)
  return;
2
  • что-то не хочет работать
    – Qver
    26 июл 2021 в 15:08
  • @Sergey Что не хочет работать? Мне сквозь монитор плохо видно, что Вы сделали. Вероятно, неаккуратно скопировали мой код.
    – user176262
    26 июл 2021 в 15:12
1

В данном случае, можно просто использовать свойство 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()); 
  }
}); 
-1

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

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

    if(count++ < 4) {
        parentOther.appendChild(cloneOther)
        parentDefault.appendChild(cloneDefault)
    }
})
1
  • зачем клонировать узлы, если выражение явно ложно?
    – Grundy
    26 июл 2021 в 16:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.