Remove Based on Class - Githubissues

alyssadbutler commented 6 years ago

Test case: https://codepen.io/alyssabutler/pen/WMGYMe

Thoughts on how to use the Remove API on load, by class selector? Thought this might get me where I needed to go, but .remove() is not affecting navigation like API.

Goal is to remove slides/cells when certain class present in child elements.

What am I missing here?

alyssadbutler commented 6 years ago

Looks like I had a bit of a novice error with my $('.carousel').flickity outside the event. I've moved it inside and it works great to remove the cells based on class of child elements... However, I'm getting a bit of a bug with the previous and next actions via the arrows. They seem to be skipping cells at times rather than consistently moving from cell to cell. Draggable works fine though. Thoughts?

desandro commented 6 years ago

Thanks for reporting this issue. Rather than removing cells from Flickity, I recommend initializing Flickity with only the necessary cells by using cellSelector

See demo https://codepen.io/desandro/pen/ff1759818072c4e9c1f8fecd57023aec

window.addEventListener("load", function() {
  // filter out cells with
  var $nonEmptyCells = $(".carousel-cell").filter( function( i, cell ) {
    var hasEmpty = $( cell ).find('.empty').length;
    return !hasEmpty;
  });
  // remove empties
  $(".carousel-cell:has('.empty')").remove();
  $nonEmptyCells.addClass('is-non-empty');
  $('.carousel').flickity({
    cellSelector: '.carousel-cell.is-non-empty'
    //Options //
  });
});

You may be interested in taking a look at Fizzy School: lessons in JavaScript for anyone learning jQuery 🎃

Julix91 commented 5 years ago

Nice side project there! :)

metafizzy / flickity

Remove Based on Class #690