Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Absent index</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- </head>
- <body>
- <button type="submit" id="add">Add</button>
- <section></section>
- </body>
- <script>
- let section = document.querySelector('section');
- let elementNumbers = new Set();
- let absentElm = new Set();
- const setAttributes = (elm, attrs) => { for (let key in attrs) elm.setAttribute(key, attrs[key]) };
- const sorterSet = (oldSet) => {
- let newSet = new Set([...oldSet].sort(function (a, b) { return a - b }));
- return newSet;
- }
- const setRemover = (keys, arr) => {
- for (prop of keys) arr.delete(prop);
- return arr;
- }
- const clickSub = (e) => {
- absentElm.add(+e.target.getAttribute('elmnum'));
- document.querySelector('p#item_' + e.target.getAttribute('elmnum')).remove();
- }
- const clickAdd = () => {
- let countElements = document.querySelectorAll('p').length;
- countElements++;
- let iteratorAbsElm = sorterSet(absentElm).values();
- let absIdx = iteratorAbsElm.next().value || 0;
- let newElementNumbers = sorterSet(setRemover(absentElm, elementNumbers));
- let currentSelector = ('p#item_' + [...newElementNumbers][absIdx - 1]);
- elementNumbers.add(absIdx || countElements);
- absentElm.delete(absIdx);
- let lineP = document.createElement('p');
- let textP = document.createTextNode('Item ' + (absIdx || countElements) + ' ');
- let buttonP = document.createElement('button');
- let buttonText = document.createTextNode('Sub');
- setAttributes(buttonP, {
- 'type': 'submit',
- 'class': 'sub',
- 'id': 'subItem_' + (absIdx || countElements),
- 'elmNum': (absIdx || countElements)
- });
- buttonP.appendChild(buttonText);
- buttonP.addEventListener('click', (e) => clickSub(e))
- lineP.setAttribute('id', 'item_' + (absIdx || countElements));
- section.insertBefore(lineP, section.querySelector(currentSelector));
- lineP.appendChild(textP);
- lineP.appendChild(buttonP);
- }
- document.querySelector('button#add').addEventListener('click', clickAdd);
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement