title: Adding and removing dom sections with javascript
body: <p>I want to be able to add new sections (via the 'add' link) and remove them (via the 'x' button) like seen in the image.</p>
  
  <p><img src="https://i.stack.imgur.com/0p13g.png" alt="screenshot"></p>
  
  <p>The HTML for the image:</p>
  
  <pre><code>&lt;fieldset&gt;
     &lt;legend&gt;Legend&lt;/legend&gt;
  
          &lt;div id="section0"&gt;
              &lt;input type="text" name="text1" value="Text1" /&gt;
              &lt;input type="text" name="text2" value="Text2" size='40' /&gt;
              &lt;input type="button" value="x" style="width: 26px" /&gt;&lt;br /&gt;
          &lt;/div&gt;
  
       &lt;a href="#"&gt;add&lt;/a&gt;&lt;br /&gt;
  
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>I guess I could add new sections as needed (i.e. section1, section2) and delete those sections according to which button was pressed. There would be a javascript function that would inject sections in the DOM everytime the 'add' link was clicked and another for deleting a section everytime the 'x' button was clicked.</p>
  
  <p>Since I have so little experience in HTML and Javascript I have no idea if this is a good/bad solution. So, my question is exactly that: Is this the right way to do it or is there a simpler/better one? Thanks.</p>
  
  <p>P.S.: Feel free to answer with some sample code</p>