Add and Erase Functions

handy functions created with looping

by Ace Tributon

HTML

<style id="phStyle"></style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class='container'>
  <div class='click'>
    Start of my clickables
  </div>
  <div class='status'>
    <div class='inner-status'>
      Please enable your browser to run scripts if it is turned off, thank you kindly. If you happen to see this in error if JavaScript is enabled, there is a bug going on. And is in due process of being fixed!</div>
  </div>
  <div class='infect'>
    <ul>This Content Covers:
      <li>Infestation</li>
      <li>Charger</li>
      <li>Ancient</li>
      <li>Boiler</li>
      <li>Runner</li>
      <li>Crawler</li>
    </ul>
  </div>
  <div class='parenthesis'>
    <p>
      The basics of Parenthesis Script
    </p>
  </div>
</div>
<script>
var $ = [
		"library","time","background-","","join","forEach","querySelectorAll","call","repeat","Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce libero mi,euismod non orci ac,consequat maximus nulla. Aliquam lacinia tellus scelerisque fringilla lacinia. Sed nec scelerisque est. Aenean id ipsum elit. Mauris vel mauris facilisis urna convallis fermentum non vel massa. Praesent porttitor gravida sem,id ornare mauris lacinia non. Pellentesque sed rutrum magna,ut iaculis mi. Nulla tincidunt eu leo eu laoreet. Mauris viverra faucibus dictum. Cras scelerisque ex ut leo aliquam aliquam. Maecenas vestibulum mollis nisl in sodales.<br />","innerHTML","<br /><br />If you happen to see this in error while JavaScript is enabled, there is a bug going on. And is in due process of being fixed!","log","<div class='","'>","</div>","'></div>","<div id='","' class='","<p class='","</p>","<a class='","' href='","</a>","onclick","textContent","style","display:block;","display:none;","#phStyle","{","}","color:",";","image:linear-gradient(0deg,",",",");border-bottom:"," solid 2px;border-top:"," solid 2px;",":hover",";transition:0.4s...

CSS

* {
  margin: 0 auto;
  width: 95%;
  text-decoration: none;
  list-style-type: none;
}

.status {
  background-image: url('https://78.media.tumblr.com/a38c2f1a4692e64097a8496caaf432e9/tumblr_ogvv5sYSxK1qdim8eo1_500.gif');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  padding: 8%;
  height: 150px auto;
  background-color: #000;
  font-size: 150%;
  width: 85%;/* filter:blur(1px); */
}

.inner-status {
  text-align: right;
  width: 60%;
  float: right;
}

JavaScript

/* SYNTAX: function name(selector,output);
	console.time('library');
	let
	  c, d, i, bg = 'background-',
	  group = gather => gather.join(''),
	  $$ = gather => gather,
	  $ = (selector, output) => document.querySelectorAll(selector).forEach(output),
	  ready = it => group(it),
	  loop = (item, callback) => {
		for (z = 0; item[z]; z++) {
		  callback.call(item[z], z);
		}
	  },
	  each = (array, output) => array.forEach(output),
	  filler = `Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce libero mi,euismod non orci ac,consequat maximus nulla. Aliquam lacinia tellus scelerisque fringilla lacinia. Sed nec scelerisque est. Aenean id ipsum elit. Mauris vel mauris facilisis urna convallis fermentum non vel massa. Praesent porttitor gravida sem,id ornare mauris lacinia non. Pellentesque sed rutrum magna,ut iaculis mi. Nulla tincidunt eu leo eu laoreet. Mauris viverra faucibus dictum. Cras scelerisque ex ut leo aliquam aliquam. Maecenas vestibulum mollis nisl in sodales.<br />`.repeat(2),
	  html = (selector, ...output) => {
		$(selector, iterate => iterate.innerHTML += group(output));
	  },
	  erase = selector => {
		$(selector, iterate => iterate.innerHTML = "");
	  },
	  change = (selector, ...output) => {
		$(selector, iterate => iterate.innerHTML = group(output));
	  },
	  changeLog = (selector, output) => {
		$(selector, iterate => iterate.innerHTML = output + '<br /><br />If you happen to see this in error while JavaScript is enabled, there is a bug going on. And is in due process of being fixed!');
		console.log(output);
	  },
	  div = (classes, ...input) => `<div class='${classes}'>${group(input)}</div>`,
	  dive = classes => `<div class='${classes}'></div>`,
	  anchor = (id, classes, ...input) => `<div id='${id}' class='${classes}'>${group(input)}</div>`,
	  p = (classes, ...input) => `<p class='${classes}'>${group(input)}</p>`,
	  a = (classes, link, ...input) => `<a class='${classes}' href='${link}'>${group(input)}</a>`,
	  click = (item,...