Remova todos os elementos filhos DOM em div

StackOverflow https://stackoverflow.com/questions/683366

  •  22-08-2019
  •  | 
  •  

Pergunta

Eu tenho os seguintes códigos de dojo para criar um elemento de superfície gráfica sob uma 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() vai desenhar um retângulo gráficos primeira vez. Se eu chamar essa função novamente em um href âncora assim: 

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

ele vai chamar outros gráficos novamente. O que eu preciso para limpar todos os gráficos sob a div e criar novamente. Como posso adicionar alguns códigos dojo para fazer isso?

Foi útil?

Solução 

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

Outras dicas

node.innerHTML = "";

Não-padrão, mas rápido e bem suportado.

Primeiro de tudo que você precisa para criar uma superfície uma vez e mantê-lo em algum lugar acessível. Exemplo: 

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

domNode é geralmente um <div> sem adornos, que é utilizado como um marcador de posição para uma superfície.

Você pode limpar tudo na superfície de uma só vez (todos os objetos de forma existentes serão invalidados, não usá-los depois disso): 

surface.clear();

Todas as funções e métodos de superfície-relacionadas podem ser encontradas na documentação oficial sobre dojox.gfx.Surface . Exemplos de uso podem ser encontrados em dojox/gfx/tests/. 

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

Dojo 1.7 ou posterior, o uso domConstruct.empty(String|DomNode) : 

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

Em Dojo mais antigos, utilize dojo.empty(String|DomNode) (reprovado no Dojo 1.8 ): 

dojo.empty( id or DOM node );

Cada um desses métodos empty remove com segurança todos os filhos do nó.

A partir do dojo API documentação : 

dojo.html._emptyNode(node);

Se você está procurando a> 1,7 Dojo forma moderna de destruir todos os filhos de nó Este é o caminho: 

// Destroys all domNode's children nodes
// domNode can be a node or its id:
domConstruct.empty(domNode);

segurança esvaziar o conteúdo de um elemento DOM. empty () apaga todas as crianças, mas mantém o nó lá.

Verifique a documentação "dom-construção" para mais detalhes. 

// Destroys domNode and all it's children
domConstruct.destroy(domNode);

Destrói um elemento DOM. destroy () apaga todas as crianças e o próprio nó.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top