Add/remove HTML inside div using JavaScript -


i want able add multiple rows div , removing them. have '+' button @ top of page adding content. right of every row there '-' button that's removing row. can't figure out javascript code in example.

this basic html structure:

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

this want add inside 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()"> 

you can this.

function addrow() {     var 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 ); } 

Comments