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>

Why you include one FORM element into another?

Andrew D.
– Andrew D.

2013-08-22 06:54:01 +00:00
Commented Aug 22, 2013 at 6:54 — Andrew D.
– Andrew D., Commented Aug 22, 2013 at 6:54

Alireza Amiri · Accepted Answer · 2013-08-22 07:07:17Z

5

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();
}

answered Aug 22, 2013 at 7:07

Alireza Amiri

5115 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aashray · Accepted Answer · 2013-08-22 07:09:08Z

0

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:

http://www.w3schools.com/htmldom/dom_elements.asp

answered Aug 22, 2013 at 7:09

Aashray

2,76318 silver badges23 bronze badges

Comments

Roopendra · Accepted Answer · 2013-08-22 07:13:26Z

0

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);
}

edited Aug 22, 2013 at 7:13

answered Aug 22, 2013 at 6:48

Roopendra

7,75716 gold badges72 silver badges95 bronze badges

1 Comment

palerdot Over a year ago

the user is using pure javascript.

Collectives™ on Stack Overflow

dynamically remove form elements using javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related