Changing how permalink and download links are hidden

Using a class name instead of setting the display CSS property. This
way, the ::after of the download link can be hidden when the permalink
is gone

src/index.html

@@ -4,8 +4,12 @@
     <button type="submit">Display</button>
 
     <ul class="inline-list">
-      <li><a href="#" class="oi with-text" data-glyph="data-transfer-download" download="image.svg" type="image/svg+xml">Download</a></li>
-      <li><a href="#" class="oi with-text" data-glyph="link-intact">Permalink</a></li>
+      <li class="download">
+        <a href="#" class="oi with-text" data-glyph="data-transfer-download" download="image.svg" type="image/svg+xml">Download</a>
+      </li>
+      <li class="permalink">
+        <a href="#" class="oi with-text" data-glyph="link-intact">Permalink</a>
+      </li>
     </ul>
   </form>
 </div>

src/js/regexper.js

@@ -10,8 +10,11 @@ export default class Regexper {
     this.field = root.querySelector('#regexp-input');
     this.error = root.querySelector('#error');
     this.warnings = root.querySelector('#warnings');
-    this.permalink = root.querySelector('a[data-glyph="link-intact"]');
-    this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
+
+    this.links = this.form.querySelector('ul');
+    this.permalink = this.links.querySelector('a[data-glyph="link-intact"]');
+    this.download = this.links.querySelector('a[data-glyph="data-transfer-download"]');
+
     this.svgContainer = root.querySelector('#regexp-render');
   }
 
@@ -97,6 +100,8 @@ export default class Regexper {
   }
 
   updateLinks() {
+    var classes = _.without(this.links.className.split(' '), ['hide-download', 'hide-permalink']);
+
     try {
       this.download.parentNode.style.display = null;
       this.download.href = this.buildBlobURL(this.svgContainer.querySelector('.svg').innerHTML);
@@ -104,15 +109,17 @@ export default class Regexper {
     catch(e) {
       // Blobs or URLs created from them don't work here.
       // Giving up on the download link
-      this.download.parentNode.style.display = 'none';
+      classes.push('hide-download');
     }
 
     if (this.permalinkEnabled) {
       this.permalink.parentNode.style.display = null;
       this.permalink.href = location.toString();
     } else {
-      this.permalink.parentNode.style.display = 'none';
+      classes.push('hide-permalink');
     }
+
+    this.links.className = classes.join(' ');
   }
 
   displayWarnings(warnings) {

src/sass/main.scss

@@ -273,6 +273,12 @@ header {
       body.has-results & {
         display: inline-block;
       }
+
+      &.hide-permalink .permalink,
+      &.hide-permalink .download::after,
+      &.hide-download .download {
+        display: none;
+      }
     }
   }