javascript - Fjern alle underordnede DOM-elementer i div

Jeg har følgende dojo-koder for å lage et overflategrafikkelement under en div:

....
<script type=text/javascript>
....
   function drawRec(){
      var node = dojo.byId("surface");
      //   remove all the children graphics
      var surface = dojox.gfx.createSurface(node, 600, 600);

      surface.createLine({
         x1 : 0,
         y1 : 0,
         x2 : 600,
         y2 : 600
      }).setStroke("black");
   }
....
</script>
....
<body>
<div id="surface"></div>
....

drawRec() vil tegne et rektangelgrafikk første gang. Hvis jeg kaller denne funksjonen igjen i en anchor href som dette:

 <a href="javascript:drawRec();">...</a>

Det vil tegne en grafikk igjen. Det jeg trenger er å rydde all grafikk under div-en og deretter lage den på nytt. Hvordan kan jeg legge til noen dojo-koder for å gjøre det?

Svar #1

while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}

Svar #2

node.innerHTML = "";

Ikke-standard, men rask og godt støttet.

Svar #3

Først må du opprette en overflate én gang og ha den lett tilgjengelig et sted. Eksempel:

var surface = dojox.gfx.createSurface(domNode, widthInPx, heightInPx);

domNode er vanligvis en enkel <div>, som brukes som en plassholder for en overflate.

Du kan tømme alt på overflaten på en gang (alle eksisterende formobjekter vil bli ugyldige, ikke bruk dem etter det):

surface.clear();

Alle funksjoner og metoder knyttet til overflater kan finnes i den offisielle dokumentasjonen for dojox.gfx.Surface. Eksempler på bruk kan finnes i dojox/gfx/tests/.

Svar #4

while(node.firstChild) {
    node.removeChild(node.firstChild);
}

Svar #5

I Dojo 1.7 eller nyere, bruk domConstruct.empty(String|DomNode):

require(["dojo/dom-construct"], function(domConstruct){
  // Empty node's children byId:
  domConstruct.empty("someId");
});

I eldre Dojo, bruk dojo.empty(String|DomNode) (utfaset fra Dojo 1.8):

dojo.empty( id or DOM node );