removable-list-element.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <title>perfect-scrollbar example</title>
  6. <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
  7. <script src="../dist/js/perfect-scrollbar.js"></script>
  8. <style>
  9. #test {
  10. border: 1px solid gray;
  11. max-height: 300px;
  12. width: 400px;
  13. overflow: auto;
  14. position: relative;
  15. }
  16. #test .element {
  17. margin: 1px;
  18. background-color: #cec;
  19. height: 44px;
  20. line-height: 44px;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id="test" class="wrapper">
  26. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  27. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  28. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  29. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  30. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  31. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  32. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  33. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  34. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  35. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  36. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  37. <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
  38. </div>
  39. <script type="text/javascript">
  40. var $ = document.querySelector.bind(document);
  41. window.onload = function () {
  42. var test = $('#test');
  43. Ps.initialize(test);
  44. [].forEach.call(test.querySelectorAll('.element'), function (el) {
  45. el.querySelector('a').addEventListener('click', function () {
  46. el.parentNode.removeChild(el);
  47. Ps.update(test);
  48. });
  49. });
  50. };
  51. </script>
  52. </body>
  53. </html>