Advertisement
Guest User

Untitled

a guest
Apr 19th, 2019
110
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Absent index</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <button type="submit" id="add">Add</button>
  10.     <section></section>
  11. </body>
  12. <script>
  13.     let section = document.querySelector('section');
  14.     let elementNumbers = new Set();
  15.     let absentElm = new Set();
  16.     const setAttributes = (elm, attrs) => { for (let key in attrs) elm.setAttribute(key, attrs[key]) };
  17.     const sorterSet = (oldSet) => {
  18.         let newSet = new Set([...oldSet].sort(function (a, b) { return a - b }));
  19.         return newSet;
  20.     }
  21.     const setRemover = (keys, arr) => {
  22.         for (prop of keys) arr.delete(prop);
  23.         return arr;
  24.     }
  25.     const clickSub = (e) => {
  26.         absentElm.add(+e.target.getAttribute('elmnum'));
  27.         document.querySelector('p#item_' + e.target.getAttribute('elmnum')).remove();
  28.     }
  29.     const clickAdd = () => {
  30.         let countElements = document.querySelectorAll('p').length;
  31.         countElements++;
  32.         let iteratorAbsElm = sorterSet(absentElm).values();
  33.         let absIdx = iteratorAbsElm.next().value || 0;
  34.         let newElementNumbers = sorterSet(setRemover(absentElm, elementNumbers));
  35.         let currentSelector = ('p#item_' + [...newElementNumbers][absIdx - 1]);
  36.         elementNumbers.add(absIdx || countElements);
  37.         absentElm.delete(absIdx);
  38.         let lineP = document.createElement('p');
  39.         let textP = document.createTextNode('Item ' + (absIdx || countElements) + ' ');
  40.         let buttonP = document.createElement('button');
  41.         let buttonText = document.createTextNode('Sub');
  42.         setAttributes(buttonP, {
  43.             'type': 'submit',
  44.             'class': 'sub',
  45.             'id': 'subItem_' + (absIdx || countElements),
  46.             'elmNum': (absIdx || countElements)
  47.         });
  48.         buttonP.appendChild(buttonText);
  49.         buttonP.addEventListener('click', (e) => clickSub(e))
  50.         lineP.setAttribute('id', 'item_' + (absIdx || countElements));
  51.         section.insertBefore(lineP, section.querySelector(currentSelector));
  52.         lineP.appendChild(textP);
  53.         lineP.appendChild(buttonP);
  54.     }
  55.     document.querySelector('button#add').addEventListener('click', clickAdd);
  56. </script>
  57. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement