Удаление и добавление элементов управления карты при перезагрузке карты

Question

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

Создание элементов управления последовательностью в main.js:

  //create range input element (slider)
  $('#panel').append('<input class="range-slider" type="range">');

  // Create skip buttons
  $('#panel').append('<button class="skip" id="reverse">Reverse</button>');
  $('#panel').append('<button class="skip" id="forward">Skip</button>');

Перезагрузить страницу в index.html:

<script type="text/javascript">
    let changeExpression = function(type) {
        let elem = document.createElement("script");
    if (type === 'heat') {
        elem.src = "js/main_heat.js";
    } else {
        elem.src = "js/main.js";
    }
    map.off();
    map.remove();
    document.body.appendChild(elem);
    }
</script>

Я пробовал "range-slider" .remove (), но это удаляет всю карту и выдает ошибку, говорящую, что это недопустимая функция. Кто-нибудь знает способ сделать это?

Answer 1

Поработав некоторое время, я смог найти обходной путь. Вместо добавления элементов управления последовательностями на панель я использовал L.control.extend, чтобы добавить их в контейнер карты, который загружает их каждый раз при обновлении страницы.