index.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <link href="../reset.css" rel="stylesheet"/>
  6. <link href="./style.css" rel="stylesheet"/>
  7. <title>MixItUp Demo - Removal by Reference</title>
  8. </head>
  9. <body>
  10. <div class="controls">
  11. <button type="button" class="control" data-filter="all">All</button>
  12. <button type="button" class="control" data-filter=".green">Green</button>
  13. <button type="button" class="control" data-filter=".blue">Blue</button>
  14. <button type="button" class="control" data-filter=".pink">Pink</button>
  15. <button type="button" class="control" data-filter="none">None</button>
  16. <button type="button" class="control" data-sort="default:asc">Asc</button>
  17. <button type="button" class="control" data-sort="default:desc">Desc</button>
  18. </div>
  19. <div class="container">
  20. <div class="mix green"></div>
  21. <div class="mix green"></div>
  22. <div class="mix blue"></div>
  23. <div class="mix pink"></div>
  24. <div class="mix green"></div>
  25. <div class="mix blue"></div>
  26. <div class="mix pink"></div>
  27. <div class="mix blue"></div>
  28. <div class="gap"></div>
  29. <div class="gap"></div>
  30. <div class="gap"></div>
  31. </div>
  32. <script src="../mixitup.min.js"></script>
  33. <script>
  34. var containerEl = document.querySelector('.container');
  35. var mixer = mixitup(containerEl);
  36. function handleTargetClick(e) {
  37. var targetEl;
  38. if (!(targetEl = e.target).matches('.mix')) {
  39. // If clicked element is not a target, return
  40. return;
  41. }
  42. // Pass the reference to the target element to the remove method
  43. mixer.remove(targetEl);
  44. }
  45. containerEl.addEventListener('click', handleTargetClick);
  46. </script>
  47. </body>
  48. </html>