title: Dynamically Create and Delete Div tag using Javascript
body: <p>I want to create 3 Div tags Dynamically when I press 3 different buttons (Red Green Blue).. When I press Red I want the height of 'red' div to be the size of my screen so that whole page appears to be red and when I press Green I want the height of the 'red' div to become 50% of my screen and other 50% of the screen should be occupied by other div (which is Green).. </p>
  
  <p>And finally when I press Blue button I want All the divs to appear on screen with equal height...</p>
  
  <p>I'm able to create the divs but I can't delete the previously created div when I press Red button after pressing all three buttons...</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
          &lt;title&gt;Ass 2&lt;/title&gt;
  
          &lt;script type="text/javascript"&gt;
  
          function fblue() {
              // document.bgColor = 'lightblue';
  
              selc=document.getElementById("first");
              divBlue=document.getElementById("one");
              myPara.removeChild(divBlue);
  
  
  
               selc=document.getElementById("first");
  
               divBlue=document.createElement("div");
               divBlue.id = "one";
               divBlue.style.backgroundColor = "lightblue";
               divBlue.style.height = "610px"
               divBlue.innerHTML = "dv tag created successfully";
  
               selc.appendChild(divBlue);
          }
  
          function fgreen() {
  
              selc=document.getElementById("first");
              divBlue=document.getElementById("one");
  
  
              divBlue.id = "one";
              divBlue.style.backgroundColor = "lightblue";
              divBlue.style.height = "305px"
              divBlue.innerHTML = "dv tag created successfully";
              selc.appendChild(divBlue);
  
              divGreen=document.createElement("div");
              divGreen.id = "one";
              divGreen.style.backgroundColor = "lightgreen";
              divGreen.style.height = "305px"
              divGreen.innerHTML = "dv tag created successfully";
              selc.appendChild(divGreen);
  
              //document.bgColor = ''; 
          }
  
          function fred() {
  
              document.getElementById("one").style.backgroundColor = 'lightblue';
              document.getElementById("one").style.width = '1104px';
              document.getElementById("one").style.height = '185px';
  
              document.getElementById("two").style.backgroundColor = 'red';
              document.getElementById("two").style.width = '1104px';
              document.getElementById("two").style.height = '185px';
  
              document.getElementById("three").style.backgroundColor = 'lightgreen';
              document.getElementById("three").style.width = '1104px';
              document.getElementById("three").style.height = '185px';
              document.bgColor = ''; 
          }
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body style="margin: 0px;"&gt;
          &lt;div style="height: 0px;" id="first"&gt;&lt;/div&gt;
  
          &lt;div id="four" style="margin-left: 415px; margin-top: 500px"&gt;
              &lt;form&gt;
                  &lt;input type="button" name="blu" value="Blue" onclick="javascript:fblue();"&gt;
                  &lt;input type="button" name="gre" value="Green/Red" onclick="javascript:fgreen();"&gt;
                  &lt;input type="button" name="re" value="Red/Green/Blue" onclick="javascript:fred();"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>