add/remove HTML input dynamically with Javascript

Again, a posting to remind me again, in case I forget how to do this.

I'm in the middle of coding a web page for member's registration. Some member might have more than one phone number, so I want to have a webpage that the member can add the input form or remove it dynamically.

I use Codeigniter and Bootstrap to code.

So, here is a part of the HTML code:

<div class="form-group">

<div class="row">

<label class="col-sm-2 control-label text1">phone</label>

<div class="col-sm-1">

<a onclick="addTelp()">

<i class="icon_plus_alt2" style="float: right"></i>

</a>

</div>

<div class="col-sm-9">

<input type="text" class="form-control" name="telp[0]">

</div>

</div>

</div>
<div id="morephone">

</div>







the new input field will be put inside div with id "morephone".

Here is the javascript code to add new input field :

<script>
var i=1;
function addTelp()
{


var div=document.createElement('div');

div.className='form-group';

var attr="telp_"+i;

div.setAttribute('id', attr);

div.innerHTML='<div class="row" >\

<label class="col-sm-2 control-label text1"> </label>\

<div class="col-sm-1" >\

<a onclick="remove(this)" style="color:red" >

<i class="icon_minus_alt2" style="float: right"> </i>

</a>\

</div>\

<div class="col-sm-9" id="inti">\

<input type="text" class="form-control" name="telp['+i+']" id="idtelp'+i+'">\

</div>\

</div>';

document.getElementById('morephone').appendChild(div);

i++;

}
</script>

The sequence number for the id and the name of the input form is optional. I use it for my own purpose that I don't describe here.

Here is the generated HTML code from that function:

<div class="form-group" id="telp_1">

<div class="row">

<label class="col-sm-2 control-label text1"> </label>

<div class="col-sm-1">

<a onclick="remove(this)" style="color:red">

<i class="icon_minus_alt2" style="float: right"> </i>

</a>

</div>

<div class="col-sm-9">

<input type="text" class="form-control" name="telp[1]" id="idtelp1">

</div>

</div>

</div>

This is how I remove the input field:

<script>
function remove(input) {


var parent=document.getElementById('morephone');

node=input.parentNode.parentNode.parentNode

parent.removeChild(node);

}
</script>




Lets take a look at the third line of the function above.

node=input.parentNode.parentNode.parentNode

It was new for me and it took quite time to understand what was it. So here is the explanation:

Take a look at the generated HTML code. Onclick event is in HTML tag <a> and call a javascript function remove with a parameter "this". "this" refers to the tag <a>.

What I want to remove with the function "remove(this)" is one input field. That means I have to remove the whole generated HTML. To do that I have to get the tag <div> with id "telp_1", which is located 3 level above the <a>.

Now lets take a look again at this line:

node=input.parentNode.parentNode.parentNode

input refers to tag <a> where the function remove() called on mouse click.
input.parentNode refers to tag <div class="col-sm-1">
input.parentNode.parentNode refers to the tag  <div class="row">
input.parentNode.parentNode.parentNode referst to the tag  <div> with id telp_1 and this is what I want to have. Right now I will call it as an element Node.

The one who can remove a node is its parent. The parent is a node in one level above, that means the parent is <div> tag with id "morephone".