www.webdeveloper.com
Results 1 to 2 of 2

Thread: innerHTML create and remove elements

  1. #1
    Join Date
    May 2012
    Posts
    2

    innerHTML create and remove elements

    Hi! I made simple script, that creates and removes <div> element. I'm experiencing a problem, I can't remove the <div>. Although it may seem trivial, I don't know how to solve it. Moreover, chrome and firefox don't give me the error description.

    Code:
    function removeDOMforChart(id) {
    var tmpElementVar = document.getElementById(id);
    tmpElementVar.innerHTML = "";
    //tmpElementVar.parentNode.removeChild(tmpElementVar); 
    }
    
    function addDOMforChart() {
    var parentID = document.getElementById("furtherCharts");
    var childFreeID = returnFirstFreeNo();
    var fullID = 'chart'+childFreeID;
    var divID = 'd'+fullID;
    	parentID.innerHTML +='<div id="'+divID+'" style="width:800px;">';
    	parentID.innerHTML +='<canvas id="'+fullID+'" width=780 style="float:left;"></canvas>';
    	parentID.innerHTML +='<img src="goUp.png" style="float:right;" onclick="removeDOMforChart(\''+divID+'\');">';
    	parentID.innerHTML +='<img src="closeChart.png" style="float:right;">';
    	parentID.innerHTML +='</div>'
    }
    The HTML looks like this :

    Code:
    <div id="furtherCharts"></div>
    I attach next div's of name dchart0,dchart1, to a div of id = "furtherCharts" etc. Within every new div there is an img with onclick function passing argument of ID (dchart0,...) to a function removeDOMforChart(id) to remove itself.

    I try to remove the content of element (chart0,...) with tmpElementVar.innerHTML = "";, no joy but no error also, with
    tmpElementVar.parentNode.removeChild(tmpElementVar);
    I get nothing for the first click, after this, every next click triggers an error
    "Uncaught TypeError: Cannot set property 'innerHTML' of null";

    Looks like the div element gets removed, but on the screen nothing changes ? How is this even possible ? Please, help me with this.

  2. #2
    Join Date
    May 2012
    Posts
    2
    HTML Code:
    <script>
    var childFreeID=0;
    function removeDOMforChart(id) {
    
    var fullID = 'chart'+id;
    var divID = 'd'+fullID;
    var tmpElementVar = document.getElementById(divID);
    tmpElementVar.innerHTML = "aaaa";
    tmpElementVar.parentNode.removeChild(tmpElementVar);
    }
    //////////////////////////////////////////////////////
    function addDOMforChart() {
    
    var parentID = document.getElementById("furtherCharts");
    var fullID = 'chart'+childFreeID;
    var divID = 'd'+fullID;
    	parentID.innerHTML +='<div id="'+divID+'" style="">';
    	parentID.innerHTML +='</div>'
    	
    var parentID = document.getElementById(divID);
    	parentID.innerHTML +='<canvas id="'+fullID+'" width=780 height=200"></canvas>';
    	parentID.innerHTML +='element of id: '+fullID+'<br>';
    	parentID.innerHTML +='<a href="javascript:removeDOMforChart('+childFreeID+')" >remove</a>';
    	
    childFreeID ++;
    }
    </script>
    <a href="javascript:addDOMforChart()" >add</a>
    <div id="furtherCharts">
    </div>
    This works well, I add elements sequentially, like this :

    Code:
    var parentID = document.getElementById("furtherCharts");
    var fullID = 'chart'+childFreeID;
    var divID = 'd'+fullID;
    	parentID.innerHTML +='<div id="'+divID+'" style="">';
    	parentID.innerHTML +='</div>'
    and then I find by id created element, 'innerHTML' to it.

    Code:
    var parentID = document.getElementById(divID);
    	parentID.innerHTML +='<canvas id="'+fullID+'" width=780 height=200"></canvas>';
    	parentID.innerHTML +='element of id: '+fullID+'<br>';
    	parentID.innerHTML +='<a href="javascript:removeDOMforChart('+childFreeID+')" >remove</a>';
    Still don't know why it didn't work well when I added all of the elements (with id's) at once.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles