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

126

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 코드를 어떻게 추가 할 수 있습니까?

javascript dojox.gfx

— David.Chu.ca
소스

286

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

— 모리스 페리
소스

17

단순히 JS-없이 해당 JS 객체없이 DOM 노드를 제거하면 메모리 누수가 발생합니다.

— 유진 라주 킨

2

@ 유진 : 그것에 대해 더 말할 수 있습니까?

— Tom Anderson

7

@Tom : dojox.gfx는 DOM 노드 (SVG, VML)가 있거나없는 (Silverlight, Flash, Canvas) 기본 그래픽 시스템과 통신하기 위해 JavaScript 객체를 만듭니다. DOM에서 DOM 노드를 제거해도 해당 JavaScript 객체 는 제거되지 않으며 JavaScript 객체에는 여전히 해당 DOM 노드에 대한 참조가 있으므로 DOM 노드도 제거되지 않습니다 . 이 상황을 처리하는 올바른 방법은이 질문에 대한 내 대답에 설명되어 있습니다.

— 유진 Lazutkin

3

@robocat IE와는 아무런 관련이 없습니다. JS 객체는 DOM 객체를 메모리에 보관하는 DOM 객체를 참조하고 기본 JS 객체는 다른 JS 객체의 참조에 의해 메모리에 보관됩니다. 예를 들어, gfx 표면은 모든 자식을 참조하고 그룹은 모든 자식을 참조하는 식입니다. DOM 노드 만 삭제하는 것만으로는 충분하지 않습니다.

— 유진 라즈 킨

3

@ david-chu-ca-아마도 유진 (Dojo GFX 라이브러리의 기본 저자)이 나중에 대답 할 수있는 것은 대답으로 표시되어야합니다. 유진-설명해 주셔서 감사합니다.

— robocat

45

node.innerHTML = "";

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

— 체탄 S
소스

2

IE에서는 지원되지 않습니다. 확인 : theogray.com/blog/2009/06/…

— Rajat

4

HTML 5에서는 표준으로 보입니다. 위의 블로그 항목은 사용자 오류였습니다. developer.mozilla.org/en-US/docs/DOM/element.innerHTML

— svachalek

하위 DOM 노드가 재사용 될 경우 이것이 문제를 일으킬 수 있다고 확신합니다. 하위 DOM 노드는 "지우기"(공백으로 설정 됨) 때문입니다.

— robocat

또한 사용자 당 Stwissel : innerHTML은 HTML 만 다루는 경우에만 작동합니다. 예를 들어 SVG가있는 경우 요소 제거 만 작동합니다.

— robocat

6

그리고 느린 : 노드 제거에 비해 jsperf.com/innerhtml-vs-removechild/15

— robocat을

24

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

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

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

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

surface.clear();

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

— 유진 라주 킨
소스

표면을 만드는 방법도 추가해 주시겠습니까? 사용자가 나 : 감사처럼 여기에 팝에 그것은 명확하지 않을 수 있습니다

— 루카 Borrione

20

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

— 제임스
소스

1

jQuery 1.x empty ()는 그런 식으로 작동합니다. 만 사용) (빈, 최신 브라우저를 지원하는 jQuery를 2.x에서에서 elem.textContent = ""; 그러나 jQuery를가 않기 때문에 그냥 그것을 의미하지 않는다 예를 들어 stwissel에 대한 버그가 아니다 당신은 HTML을 처리하는 경우 innerHTML을에만 작동 "말한다. 예를 들어이있는 경우 "요소 제거 만 가능한 SVG"가 작동합니다. 또한 다른 관련 메모를 참조하십시오 : stackoverflow.com/questions/3955229/…

— robocat

18

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방법은 노드의 모든 자식을 안전하게 제거합니다.

— 브라이언 C
소스

3

dojo API 문서에서 :

dojo.html._emptyNode(node);

— 체이스 세이버 트
소스

2

모든 노드의 자식을 파괴하는 현대> 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 ()는 모든 자식과 노드 자체를 삭제합니다.

— 루이 마퀴
소스

1

그는 아이들이 제거되기를 원하기 domConstruct.empty()때문에이 경우 더 좋을 것입니다.

— g00glen00b