Add/remove HTML inside div using JavaScript

Question

I want to be able to add multiple rows to a div and also removing them. I have a '+' button at the top of the page which is for adding content. Then to the right of every row there is a '-' button that's for removing that very row. I just can't figure out the javascript code in this example.

This is my basic HTML structure:

<input type="button" value="+" onclick="addRow()">  <div id="content">  </div> 

This is what I want to add inside the content div:

<input type="text" name="name" value="" /> <input type="text" name="value" value="" /> <label><input type="checkbox" name="check" value="1" />Checked?</label> <input type="button" value="-" onclick="removeRow()"> 

Answer 1

You can do something like this.

function addRow() {   const div = document.createElement('div');    div.className = 'row';    div.innerHTML = `     <input type="text" name="name" value="" />     <input type="text" name="value" value="" />     <label>        <input type="checkbox" name="check" value="1" /> Checked?      </label>     <input type="button" value="-" onclick="removeRow(this)" />   `;    document.getElementById('content').appendChild(div); }  function removeRow(input) {   document.getElementById('content').removeChild(input.parentNode); }