dynamically remove form elements using javascript
Question
I want to dynamically remove form elements using javascript. The code below is simple and dynamically adds form elements.
My form looks like (sorry, tried to get it working in jsfiddle but couldn't. Definitely works on my own servers though):
"first name" "last name" "age"
Add more data (button) Submit (button)
If you click on Add more data you get
"first name" "last name" "age"
"first name" "last name" "age" "remove (button)"
Add more data (button) Submit (button)
I record every new row via fooID+x+i. Eg the first time you add form element "first name" would be referenced as "foo10", "last name" will be "foo11" and so forth.
How do I fix the below to dynamically remove form elements that are being clicked on to be removed?
<script language="javascript">
function removeRow(r)
{
/*********************
Need code in here
*********************/
}
</script>
var x = 1;
function add() {
var fooId = "foo";
for (i=1; i<=3; i++)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", fooId+x+i);
element.setAttribute("name", fooId+x+i);
element.setAttribute("id", fooId+x+i);
if(i==1){
element.setAttribute("value", "First name");
}
if(i==2){
element.setAttribute("value", "Last name");
}
if(i==3){
element.setAttribute("value", "age");
}
var foo = document.getElementById("fooBar");
foo.appendChild(element);
foo.innerHTML += ' ';
}
i++;
var element = document.createElement("input");
element.setAttribute("type", "button");
element.setAttribute("value", "Remove");
element.setAttribute("id", fooId+x+i);
element.setAttribute("name", fooId+x+i);
element.setAttribute("onclick", "removeRow(this)");
foo.appendChild(element);
var br = document.createElement("br");
foo.appendChild(br);
x++;
}
</SCRIPT>
<body>
<center>
<form id="form" name="form" action="test.php" method="post" enctype="multipart/form-data">
<input type="text" id="foo01" name="foo01" value="first name">
<input type="text" id="foo02" name="foo02" value="last name"/>
<input type="text" id="foo03" name="foo03" value="age">
<br>
<span id="fooBar"></span>
<FORM>
<INPUT type="button" value="Add more data" onclick="add()"/>
<input type="submit" value="Submit">
</center>
</FORM>
</form>
</body>
3 answers
solution1
5 ACCPTED 2013-08-22 07:07:17
This will work for you :
function removeRow(r)
{
var fooId = "foo";
var id = r.id.substring(3,r.id.length-1);
for(i=1;i<=3;i++)
{
document.getElementById(fooId+id+i).remove();
}
document.getElementById(fooId+id+5).nextSibling.remove();
document.getElementById(fooId+id+5).remove();
}
solution2
0 2013-08-22 06:48:52
As per my understanding you want to remove complete div in which your
"first name" "last name" "age" "remove (button)"
exist. Simple check click event and remove that parent div by using below code :-
$('#removeButtonID').click(function(){
$(this).parent('div').remove();
});
Pure Javascript :-
function removeRow(r)
{
var d = document.getElementById('myDiv');//Parent Div ID
var olddiv = document.getElementById(r);
d.removeChild(olddiv);
}
solution3
0 2013-08-22 07:09:08
If you want to remove an element, you need to get the parent and child reference, use the following function to remove that element:
parent.removeChild(child);
Check this link for better understanding:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.