title: Removing Elements with a certain id in a vue.js method
body: <p>By reading the question, you are probably already thinking; Just use plain JavaScript and add: </p>
  
  <pre><code>document.getElementById('yourId').classList.add('hide');
  
  .hide {
  display: none;
  }
  </code></pre>
  
  <p>I added similar code to my program, and I am not getting any results.
  Here is a codepen for the project I'm making.
  Program View: <a href="https://codepen.io/dickeddocks/full/gKNMLW" rel="nofollow noreferrer">https://codepen.io/dickeddocks/full/gKNMLW</a> <br>
  Editor View: <a href="https://codepen.io/dickeddocks/pen/gKNMLW" rel="nofollow noreferrer">https://codepen.io/dickeddocks/pen/gKNMLW</a></p>
  
  <p>If you just play the game and keep clicking "attack" till the round ends, you will get an alert and the log at the bottom will disappear. If you click "attack" again, another round starts but the log from the last round reappears.</p>
  
  <p>My solution to fixing this was to add an id to each <code>&lt;li&gt;</code> element and the id would change after the round reset.</p>
  
  <p>Then, I tried adding these two solutions to the function which would reset the app. ('#log0' being the id I chose to give to all the list elements generated in the first round. Then, a counter variable would run making all the list elements from the next round '#log1' -> '#log2' and so on).</p>
  
  <pre><code>document.getElementById('log0').classList.add('hideLog');
  document.getElementById('log0').style.display = "none";
  
  .hideLog {
  display: none;
  }
  </code></pre>
  
  <p>But for some reason all <code>&lt;li&gt;</code> items with <code>#log0</code> keep appearing</p>
  
  <p>P.S I dont want anyone to read all the code in the codepen, if you know a simple solution off the top of your mind, I'll happily take that.</p>
  
  <p>Update: Ive even tried using Jquery's .addClass and still no results.</p>