Jump to content

[SOLVED] Can't remove div


colap
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.