Create and remove elements or text fields by dom in javascript

Js

Posted on 13 Apr 15 by Vickey
  500



Here i am using dom for create and remove elements. I have a div and a button on this page by clicking button i will add or create new text field and a button for remove the field first got the existing div by id. now create a new div and a button for reomve the text fields after this append input fields and button in new created div and finally append new div in parent div

<div id="parentDiv"></div>
<input type="button" onclick="addmore();" value="Add text field">

<script>
function addmore(){
    var parentElement=document.getElementById('parentDiv');
    var newDiv=document.createElement('div');
    var input_fields=document.createElement('input');
    input_fields.setAttribute('name','rate');

    var newButton=document.createElement('input');
    newButton.type='button';
    newButton.value='Remove';
    newButton.id='btn[]';
    newButton.name='btnName[]';
    newButton.className = "removeButton";
    newButton.title='Remove Your Choice.';
    newButton.style.cursor='pointer';
    newButton.onclick=function RemoveEntry()
    {
        parentElement.removeChild(this.parentNode);
    }
    newDiv.appendChild(input_fields);
    newDiv.appendChild(newButton);
    parentElement.appendChild(newDiv);
}
</script>

If this post help you reduce time to develop, you can help me to maintain this website :)
www.000webhost.com