removable-list-element.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="../css/perfect-scrollbar.css" rel="stylesheet">
  5. <script src="../dist/perfect-scrollbar.js"></script>
  6. <style>
  7. #container {
  8. border: 1px solid gray;
  9. max-height: 300px;
  10. width: 400px;
  11. overflow: auto;
  12. position: relative;
  13. }
  14. #container .element {
  15. margin: 1px;
  16. background-color: #cec;
  17. height: 44px;
  18. line-height: 44px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="container">
  24. <div class="element">Hello! Click <a href="#">here</a> to remove this!</div>
  25. <div class="element">Hello! Click <a href="#">here</a> to remove this!</div>
  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>
  37. <script>
  38. var $ = document.querySelector.bind(document);
  39. var ps = new PerfectScrollbar('#container');
  40. var container = $('#container');
  41. [].forEach.call(container.querySelectorAll('.element'), function (el) {
  42. el.querySelector('a').addEventListener('click', function () {
  43. el.parentNode.removeChild(el);
  44. ps.update();
  45. });
  46. });
  47. </script>
  48. </body>
  49. </html>