Jquery/ Javascript: нежелательная функция дублирования при загрузке страницы

Question

У меня есть веб-приложение, которое основано на пользователях, создающих определенные div с помощью функции щелчка. Когда пользователь добавляет div, я также даю ему возможность удалить указанную функцию. Каждый раз, когда пользователь добавляет div, он помещается в массив. Затем пользователь может сохранить массив и загрузить его, когда они вернутся.

Функция удаления div вложена в функцию добавления, так как это единственный найденный мной способ заставить функцию работать.

Проблема, с которой я столкнулся, заключается в том, что я должен также вызвать функцию удаления в функции загрузки, чтобы кнопка удаления работала до нажатия кнопки добавления. Я попытался просто вызвать функцию вне любой функции, но так как нет никаких div для начала. Поэтому, когда страница загружается и нажимается кнопка удаления, она реализуется дважды и разрушает приложение.

Я новичок в программировании, и то, что я делаю сейчас, в основном процедурное, поэтому любая входная работа приветствуется. Я чувствую, что я делаю ошибку новичка, псевдокод ниже.

$(button).cick(function(){
    store div in array;
    add div to container;
    call remove function;
});
function loadPage() {
    retrieve stored array;
    add stored divs to container;
    call remove function;
}
loadPage();

Answer 1

Вы можете делегировать действие удаления контейнеру, например так:

$('#container').on('click', '.delete', function() {
    $(this).closest('div.className').remove();
    //here delete stored clone from array.
});

Настройте селекторы, чтобы соответствовать вашему HTML

Таким образом, любая кнопка с class="delete", при нажатии, будет удален (удален) его (внутренний) содержащий div.

• Действие будет применено ко всем кнопкам удаления в контейнере, независимо от того, находятся ли они на месте во время присоединения этого обработчика щелчков или позже.
• Это делегированное действие останется на месте при условии, что сам (внешний) контейнер не будет удален (удален).

Answer 2

Я думаю, что это проще, если у вас есть отдельные кнопки для добавления и удаления. Таким образом, вы можете привязать одну кнопку к добавлению div в контейнер, а другую для удаления последнего нажатого div.

Нечто подобное может помочь

  var listOfAddedDivs = [];

  $('.addDivButton').click(addNewDiv);

  $('.removeDivButton').click(removeCurrentDiv);


  function addNewDiv() {
     listOfAddedDivs.push('<div> something </div>');
     updateContainer(listOfAddedDivs);
  }

  function removeCurrentDiv() {
    if(listOfAddedDivs.length >0) {
          listOfAddedDivs.pop();
      }
      updateContainer(listOfAddedDivs);
  }

  function updateContainer(arrayContainingDivs) {

   $('.container').html(arrayContainingDivs.join(' '));
  }