Dynamically add more radio buttons and remove it

Question

I have code like this:

<html>
<SCRIPT language="javascript">

function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "line");


    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Line");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);


    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "pie");

    var foo = document.getElementById("fooBar2");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Pie");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);



     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "trend");

    var foo = document.getElementById("fooBar3");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Monthly Trend");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);


     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "heatmap");


    var foo = document.getElementById("fooBar4");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Heatmap");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);

}


function add2() {



  var d = document.getElementById('fooBar');
  var olddiv = document.getElementById("feed");
  d.removeChild(olddiv);

     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "hidden");
    element.setAttribute("name", "comparison");
    element.setAttribute("name", "comparison");
    element.setAttribute("value", "comparison");


    var foo = document.getElementById("fooBar5");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Heatmap");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);



 }

</script>
 <br/>
<p align="left" id="status"><strong>Report type:</strong></p>
 <input type="radio" name="feed" id="feed" value="comparison" onclick="add2()" /> Comparison Report
<br/>
<br/>
<input type="radio" name="feed" id="feed" value="daily" onclick="add()" /> Individual Reports
<br/>
<form method="post" action ="http://localhost/ana/node/47">
<span id="fooBar">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar2">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar3">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar4">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar4">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar5">&nbsp; &nbsp; &nbsp; &nbsp;</span>
 <br />
 <br/>
  <p>
    <input type="submit" name="submit" id="submit" value="Next" />
  </p>

</form> 
</div>

 </html>

when we open the html page it's like this:

Comparison Report
Individual Reports

And when we click the on Individual Reports it will be like this:

Comparison Report
Individual Reports
- Line
- Pie
- Monthly Trend
- Heatmap

My question is how to remove that childs radio buttons (line, pie, monthly trend, and heatmap) along with the labes when I change my selection from Individual Reports to Comparison Report?

score 1 · Accepted Answer · answered Sep 03 '12 at 06:16

If I am understanding your question correctly, you want some sort of accordion with radiobuttons.

This code does not remove them, it hides them, however I think that is really what you are after.

This code requires jQuery, which is something I believe you should look into.

http://jsfiddle.net/NHDmf/1/

I made it as dynamic and independant as possible, so you can keep adding options to the Comparisson and Individual lists.

Dynamically add more radio buttons and remove it

1 Answers1