title: Dynamic DOM elements add/remove with Vue
body: <p>I have started to learn Vue.js and i can't figure it out how would you do this in Vue.js like I did it with jQuery:</p>
  
  <pre><code>&lt;!-- jQuery --&gt;
  &lt;h2&gt;jQuery&lt;/h2&gt;
  &lt;table id="t1"&gt;
    &lt;tr&gt;
      &lt;th&gt;Item&lt;/th&gt;
      &lt;th&gt;Quantity&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr id="r1"&gt;
      &lt;td&gt;&lt;input name="item[]" type="text"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="quantity[]" type="number"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="deleteRow"&gt;X&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button id="addRow"&gt;Add Row&lt;/button&gt;
  </code></pre>
  
  <p>.js</p>
  
  <pre><code>// jQuery
  $(document).on('click', '#addRow', function(){
      var row = parseInt($('#t1 tr:last-child').attr('id')) + 1;
      alert(row);
          $('#t1').append('&lt;tr id="r'+row+'"&gt;&lt;td&gt;&lt;input name="item[]" type="text"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="quantity[]" type="number"/&gt;&lt;/td&gt;&lt;td&gt;&lt;button class="deleteRow"&gt;X&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
  });
  
  $(document).on('click', '.deleteRow', function(){
          var row = parseInt($(this).closest('tr').attr('id'));
      $('#r'+row).remove();
  });
  </code></pre>
  
  <p>How to create a whole new element on a click with Vue and how to remove it?</p>
  
  <p>Here is all loaded in <a href="https://jsfiddle.net/50wL7mdz/17736/" rel="noreferrer">JSFiddle</a></p>