[javascript] div에서 모든 자식 DOM 요소를 제거하십시오.

Program / 글쓴이

div 아래에 표면 그래픽 요소를 만드는 다음 dojo 코드가 있습니다.

....
<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()사각형 그래픽을 처음으로 그립니다. 다음과 같이 anchor href 에서이 함수를 다시 호출하면 :

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

다른 그래픽을 다시 그립니다. div 아래의 모든 그래픽을 정리하고 다시 생성 해야하는 것. 이를 위해 dojo 코드를 어떻게 추가 할 수 있습니까?

답변

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

답변

node.innerHTML = "";

비표준이지만 빠르며 잘 지원됩니다.

답변

우선, 표면을 한 번 작성하고 어딘가에 편리하게 유지해야합니다. 예:

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

domNode일반적으로 <div>표면의 자리 표시 자로 사용되는 unadorned 입니다.

한 번에 표면의 모든 것을 지울 수 있습니다 (기존의 모든 모양 개체는 무효화됩니다. 그 후에는 사용하지 마십시오).

surface.clear();

모든 표면 관련 기능 및 방법은 dojox.gfx.Surface 의 공식 문서에서 찾을 수 있습니다 . 사용 예는에서 찾을 수 있습니다 dojox/gfx/tests/.

답변

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

답변

Dojo 1.7 이상에서 다음을 사용하십시오 domConstruct.empty(String|DomNode).

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

이전 Dojo에서는 다음을 사용하십시오 dojo.empty(String|DomNode)(Dojo 1.8에서 더 이상 사용되지 않음).

dojo.empty( id or DOM node );

이러한 각 empty방법은 노드의 모든 자식을 안전하게 제거합니다.

답변

dojo API 문서에서 :

dojo.html._emptyNode(node);

답변

모든 노드의 자식을 파괴하는 현대> 1.7 Dojo 방법을 찾고 있다면 다음과 같습니다.

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

DOM 요소의 내용을 안전하게 비 웁니다. empty ()는 모든 자식을 삭제하지만 노드를 유지합니다.

자세한 내용은 “dom-construct”설명서를 확인하십시오.

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

DOM 요소를 삭제합니다. destroy ()는 모든 자식과 노드 자체를 삭제합니다.