Dynamic generation of textbox in javascript

I have written a javascript to generate textbox dynamically.

Code:

function addtextbox(val)
{
 var foo = document.getElementById('fooBar');
 var num = (document.getElementById('cnt').value -1 + 2);
 ingrds[num]= val;
 var newdiv = document.createElement('div');
 var divIdName = 'divid'+num;       
 newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type="text" size="15" id="' + ingrds[num] + '" value="' +   val + '"><a href="javascript:remove('+divIdName+')">Remove</a>';
foo.appendC开发者_如何学Gohild(newdiv);
}

//function to remove dynamically added textbox

function remove(dId)
{
 var foo = document.getElementById('fooBar');
 foo.removeChild(dId);
}

Whenever remove function is called i want to get the value of the textbox before removing it. How to go about it. Thanks in advance.

function remove()
{
var foo = document.getElementById('fooBar');
var value = foo.value;
alert(value); // will show you the value for debugging purpose
foo.removeChild(dId);
}

input elements can have their value access using the input.value property. The same goes for textarea element (textbox).

EDIT

"<a href="javascript:remove('+divIdName+')">Remove</a>"

can be changed to

"<a href="javascript:remove('+ingrds[num]+')">Remove</a>"

no your function ca use the parameter

function remove(id)
    {
    var foo = document.getElementById(id); // selects the input element
    var value = foo.value;
    foo.removeChild(dId);
    }

Just use innerHTML.

var foo = document.getElementById('fooBar');
var fooHtml = foo.innerHTML;
foo.removeChild(dId);

You need to pull the value. You're just selecting the element currently

function remove()
{
var foo = document.getElementById('fooBar').value;
foo.removeChild(dId);
}