Добавить элемент к элементу div при смене слайда fullpage.js

Question

У меня есть сайт на основе fullpage.js, где мне нужно добавить к заголовку некоторые части HTML, расположенные на каждом слайде. Все работает хорошо, кроме одного - я не могу понять, как избежать дублирования контента. Каждый раз, когда я меняю слайд вместо того, чтобы получить новый элемент и удалить старый, я вижу 2 и более (в зависимости от того, сколько слайдов я выбрал)

var headerData = $('#data-header');
var slideData = $('.fp-slide.active .slide-data');

$('.slide').each(function(){
     if ($(this).hasClass('active')) {
         var slideData = $(this).find('.slide-data');
          slideData.prependTo(headerData);
        } else {
        // need to remove it somehow but remove() or hide() isnt working
        }
    });

Я запускаю этот код для события afterSlideLoad fullpage.js.

Answer 1

Попробуйте это:

var headerData = $('#data-header');
var slideData = $('.fp-slide.active .slide-data');

$('.slide').each(function(){
    if ($(this).hasClass('active')) {
        var slideData = $(this).find('.slide-data');
        slideData.html('') // before adding new header data, first clear the old one
        slideData.prependTo(headerData);
    }
});