data-hide

by Vladymyr Shevchuk

HTML

<pre id="tortle">
    _____     ____
   /      \  |  o | 
  |        |/ ___\| 
  |_________/     
  |_|_| |_|_|
</pre>

<pre class="rabbit">
               ,\
             \\\,_
              \` ,\
         __,.-" =__)
       ."        )
    ,_/   ,    \/\_
    \_|    )_-\ \_-`
       `-----` `--`
</pre>

<button data-hide="#tortle">Click to hide Tortle</button>
<button data-hide=".rabbit">Click to hide Rabbit</button>

JavaScript

document.addEventListener('click', event => {
	const { hide: hideSelector} = event.target.dataset;
  
	if (hideSelector) { 
    const element = document.querySelector(hideSelector);
    
    element.style.display = 'none';
  }
});