Menu
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>
526
In JavaScript, an element can only be deleted from its parent. To delete one, you have to get the element, find its parent, and delete it using the removeChild method.
createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the <form> element by appendChild() method.
Select the HTML element which need to remove. Use JavaScript remove() and removeChild() method to remove the element from the HTML document.
Create a button and on clicking this button we will dynamically add the input fields. Now write the click() function to handle the adding and removing functionality. Use the append() method to add the input field code to the existing HTML document.
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();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
