Add or Remove form fields on the fly

[rics]

Hello,

I have a form with basicly three fields, as follows:
NAME
PHONE_TYPE - PHONE_NUMBER
The second line have two fields. I have to do something to allow the
user to add or remove more lines on this form, so he could send how
many combinations (phone_type & phone_number) he need to.

For example:
NAME
PHONE_TYPE - PHONE_NUMBER (+)
and then he clicks the + button:
NAME
PHONE_TYPE - PHONE_NUMBER (-)
PHONE_TYPE - PHONE_NUMBER (+)
and so on... If he clicks the - sign, that line is deleted.

How can I do that???

[scripts.contact]

On Jun 4, 9:09 pm, rics <[e-mail]:

Hello,

I have a form with basicly three fields, as follows:

NAME
PHONE_TYPE - PHONE_NUMBER

The second line have two fields. I have to do something to allow the
user to add or remove more lines on this form, so he could send how
many combinations (phone_type & phone_number) he need to.

For example:

NAME
PHONE_TYPE - PHONE_NUMBER (+)

and then he clicks the + button:

NAME
PHONE_TYPE - PHONE_NUMBER (-)
PHONE_TYPE - PHONE_NUMBER (+)

and so on... If he clicks the - sign, that line is deleted.

How can I do that???

something like this:
function add(b){
var
t=document.getElementById("mb").appendChild(b.pare ntElement.cloneNode(true))
b.innerHTML="-";
b.onclick=function(){
t.parentNode.removeChild(t);
this.onclick=function(){add(this)};
this.innerHTML="+"
}
}
<div id="mb">
<p><input></p>
<p><input><input<button onclick="add(this)">+</button></p>
</div>

[rics]

On 5 jun, 01:45, "scripts.contact" <[e-mail]:

On Jun 4, 9:09 pm, rics <[e-mail]:

Hello,

I have a form with basicly three fields, as follows:

NAME
PHONE_TYPE - PHONE_NUMBER

The second line have two fields. I have to do something to allow the
user to add or remove more lines on this form, so he could send how
many combinations (phone_type & phone_number) he need to.

For example:

NAME
PHONE_TYPE - PHONE_NUMBER (+)

and then he clicks the + button:

NAME
PHONE_TYPE - PHONE_NUMBER (-)
PHONE_TYPE - PHONE_NUMBER (+)

and so on... If he clicks the - sign, that line is deleted.

How can I do that???

something like this:

function add(b){
var
t=document.getElementById("mb").appendChild(b.pare ntElement.cloneNode(true))
b.innerHTML="-";
b.onclick=function(){
t.parentNode.removeChild(t);
this.onclick=function(){add(this)};
this.innerHTML="+"
}
}

<div id="mb">
<p><input></p>
<p><input><input<button onclick="add(this)">+</button></p>
</div>

Thanks! With your code as a start point I could finaly find a
solution. I new to javascript. I'm beggining to learn it now.

Here's the code that made things work as expected.
function add_del(b){
if (b.innerHTML == "+"){
var
t=document.getElementById("mb").appendChild(b.pare ntNode.cloneNode(true));
b.innerHTML="-";
} else {
b.parentNode.parentNode.removeChild(b.parentNode);
}
}

<div id="mb">
<p><input></p>
<p><input><input><button onclick="horarios(this)">+</button></p>
</div>