[SOLVED] Can't remove div

colap · October 7, 2009

Adding divs work,but removing divs don't work.

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

<html>
    <head>
        <title> "Javascript Testing"></title>
        <script type="text/javascript" language="javascript">
            function addElement() {
                var ni = document.getElementById('myDiv');
                var numi = document.getElementById('theValue');
                var num = (document.getElementById('theValue').value -1)+ 2;
                numi.value = num;
                var newdiv = document.createElement('div');
                var divIdName = 'my'+num;
                var writediv=document.getElementById('idrgt');
                writediv.innerHTML="divIdName: "+divIdName+"<br/>";
                newdiv.setAttribute('id',divIdName);
                newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
                ni.appendChild(newdiv);
            }
            function removeElement(divNum) {
                var d = document.getElementById('myDiv');
                var olddiv = document.getElementById(divNum);
                d.removeChild(olddiv);
            }
        </script>
        <style type="text/css">
            div.div1{                                
                width:400px;
                height:70px;
                background-color:green;
            }
            div.rgt{
                position:absolute;
                left:500px;
                top:300px;
                width:400px;
                height:70px;
                background-color:blue;
            }
            div.del{
                position:absolute;
                left:500px;
                top:100px;
                width:400px;
                height:70px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div class="div1" id="myDiv">
            <textarea rows="2" cols="20">
			Comment;
            </textarea>
            <input type="hidden" value="0" id="theValue" />
            <input type="submit" value="Submit" onclick="addElement()"/>
        </div>
        <div class="rgt" id="idrgt">            
        </div>
        <div class="del">            
        </div>
    </body>
</html>

haku · October 7, 2009

I only gave it a quick glance, but try changing this:

var olddiv = document.getElementById(divNum);

to this:

var olddiv = document.getElementById("div" + divNum);

colap · October 7, 2009

I only gave it a quick glance, but try changing this:
var olddiv = document.getElementById(divNum);
to this:
var olddiv = document.getElementById("div" + divNum);

Changed it.But it doesn't work.

<html>
    <head>
        <title> "Javascript Testing"></title>
        <script type="text/javascript" language="javascript">
            function addElement() {
                var ni = document.getElementById('myDiv');
                var numi = document.getElementById('theValue');
                var num = (document.getElementById('theValue').value -1)+ 2;
                numi.value = num;
                var newdiv = document.createElement('div');
                var divIdName = 'my'+num;
                var writediv=document.getElementById('idrgt');
                writediv.innerHTML="divIdName: "+divIdName+"<br/>";
                newdiv.setAttribute('id',divIdName);
                newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
                ni.appendChild(newdiv);
            }
            function removeElement(divNum) {
                var d = document.getElementById('myDiv');
                var olddiv = document.getElementById('DIV'+divNum);
                d.removeChild(olddiv);
            }
        </script>
        <style type="text/css">
            div.div1{                                
                width:400px;
                height:70px;
                background-color:green;
            }
            div.rgt{
                position:absolute;
                left:500px;
                top:300px;
                width:400px;
                height:70px;
                background-color:blue;
            }
            div.del{
                position:absolute;
                left:500px;
                top:100px;
                width:400px;
                height:70px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div class="div1" id="myDiv">
            <textarea rows="2" cols="20">
			Comment;
            </textarea>
            <input type="hidden" value="0" id="theValue" />
            <input type="submit" value="Submit" onclick="addElement()"/>
        </div>
        <div class="rgt" id="idrgt">            
        </div>
        <div class="del">            
        </div>
    </body>
</html>

KevinM1 · October 7, 2009

You're not actually calling removeElement() anywhere.

kickstart · October 7, 2009

Hi

In the remove function you are trying to remove a div called DIV1 (for example), having passed the number 1. However the divs you are adding are called my1 (for example).

Change:-

var olddiv = document.getElementById('DIV'+divNum);

to

var olddiv = document.getElementById('my'+divNum);

All the best

Keith

colap · October 7, 2009

You're not actually calling removeElement() anywhere.

Here we go:

newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';

Probably something is wrong here.But i can't find it.

How would i add a button in that new div?

I want to test with a button instead of <a href> link.

colap · October 7, 2009

Hi

In the remove function you are trying to remove a div called DIV1 (for example), having passed the number 1. However the divs you are adding are called my1 (for example).

Change:-

var olddiv = document.getElementById('DIV'+divNum);

to

var olddiv = document.getElementById('my'+divNum);

All the best

Keith

I have also tried with 'my'.But didn't work.

Probably there is a mistake with removeElement() function calling but i can't find it.

haku · October 7, 2009

That's the problem. As Nightslayr said - you aren't calling that function anywhere.

KevinM1 · October 7, 2009

I've been trying to make a test script to show the OP how to do it, but I've run into a snag myself. I'm getting an odd scope error when trying to pass the id of one of the dynamically created divs to the removeElement() function. My test code is below:

<html>
   <head>
      <title>Blah</title>
      <style>
         div { border: 1px solid black; }
      </style>
   </head>

   <body>
      <div id="myDiv"></div>
      <div id="idRgt"></div>
      <button id="addDiv">Click to add new div</button>
      <input type="hidden" id="numDivs" value="0" />
   </body>

   <script type="text/javascript">
      var oButton = document.getElementById('addDiv');
      var numDivs = document.getElementById('numDivs').value;

      oButton.onclick = addElement;

      function addElement(){
         var mainDiv = document.getElementById('myDiv');
         var newDiv = document.createElement('div');
         var newDivId = 'my' + numDivs;
         var writeDiv = document.getElementById('idRgt');
         writeDiv.innerHTML = "newDivId: " + newDivId + "<br/>";
         newDiv.setAttribute('id', newDivId);
         newDiv.innerHTML = "Element Number: " + numDivs + "has been added! <button onclick='removeElement(" + newDivId + ");'>Remove div: " + newDivId + "</button>";
         mainDiv.appendChild(newDiv);
         ++numDivs;
      }

      function removeElement(divId){
         alert(divId);
         var mainDiv = document.getElementById('myDiv');
         var divRem = document.getElementById(divId);

         if (divRem){
            mainDiv.removeChild(divRem);
            --numDivs;
         }
      }
   </script>

</html>

The error is:

Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
http://www.nightslyr.com/divadd.html#

Line 1

I can't see where the error is actually happening, however...I'm normally very careful with how I obtain my element references. Also, the actual div id isn't being passed into removeElement(). It's being created properly in addElement(), but the alert tells me that divId is actually the div itself ([Object HTMLDivElement]), rather than its id. Very odd.

I think another pair of eyes are necessary, as I can't see the problem from where I sit.

kickstart · October 7, 2009

Hi

Spotted the error (I think). Couple of missing quotes:-

newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement("'+divIdName+'")\'>Remove the div "'+divIdName+'"</a>';

All the best

Keith

KevinM1 · October 7, 2009

I don't know if you were talking to me or the OP, kickstart, but missing quotes was the cause of my error.

So, code that works as the OP intended:

<html>
   <head>
      <title>Blah</title>
      <style>
         div { border: 1px solid black; }
      </style>
   </head>

   <body>
      <div id="myDiv"></div>
      <div id="idRgt"></div>
      <button id="addDiv">Click to add new div</button>
      <input type="hidden" id="numDivs" value="0" />
   </body>

   <script type="text/javascript">
      var oButton = document.getElementById('addDiv');
      var numDivs = document.getElementById('numDivs').value;

      oButton.onclick = addElement;

      function addElement(){
         var mainDiv = document.getElementById('myDiv');
         var newDiv = document.createElement('div');
         var newDivId = 'my' + numDivs;
         var writeDiv = document.getElementById('idRgt');
         writeDiv.innerHTML = "newDivId: " + newDivId + "<br/>";
         newDiv.setAttribute('id', newDivId);
         newDiv.innerHTML = "Element Number: " + numDivs + "has been added! <button onclick='removeElement(\"" + newDivId + "\");'>Remove div: " + newDivId + "</button>";
         mainDiv.appendChild(newDiv);
         ++numDivs;
      }

      function removeElement(divId){
         var mainDiv = document.getElementById('myDiv');
         var divRem = document.getElementById(divId);

         if (divRem){
            mainDiv.removeChild(divRem);
            --numDivs;
         }
      }
   </script>

</html>

kickstart · October 7, 2009

I don't know if you were talking to me or the OP, kickstart, but missing quotes was the cause of my error.

Same error was in both. I spent ages faffing around with other bits of the code trying to work out what was going wrong before realising.

All the best

Keith

colap · October 8, 2009

Thank you.Solved.

Sign In

[SOLVED] Can't remove div

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information