सभी बच्चों को DOM तत्वों को div में निकालें

126

मेरे पास 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()पहली बार एक आयत ग्राफिक्स तैयार करेगा। अगर मैं इस समारोह को फिर से इस तरह से एक एंकर में कहता हूं:

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

यह फिर से एक और ग्राफिक्स आकर्षित करेगा। मुझे div के तहत सभी ग्राफिक्स को साफ करने और फिर से बनाने की आवश्यकता है। मैं ऐसा करने के लिए कुछ डोजो कोड कैसे जोड़ सकता हूं?

javascript dojox.gfx

— David.Chu.ca
स्रोत

286

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

— मौरिस पेरी
स्रोत

17

बस पांडित्य होने के लिए --- संबंधित जेएस वस्तुओं के बिना डोम नोड्स को हटाने से मेमोरी लीक हो जाएगी।

— यूजीन लाजुटकिन

2

@ यूजीन: क्या आप इसके बारे में और कह सकते हैं?

— टॉम एंडरसन

7

@Tom: dojox.gfx अंतर्निहित ग्राफिक्स सिस्टम के साथ संवाद करने के लिए जावास्क्रिप्ट ऑब्जेक्ट बनाता है, जिसमें DOM नोड (SVG, VML) या नहीं (सिल्वरलाइट, फ्लैश, कैनवस) हो सकते हैं। DOM से DOM नोड्स को हटाने से उन JavaScript ऑब्जेक्ट्स को हटाया नहीं जाता है , और यह DOM नोड्स को नहीं हटाता है क्योंकि जावास्क्रिप्ट ऑब्जेक्ट्स में अभी भी उन DOM नोड्स के संदर्भ होते हैं। इस प्रश्न के लिए मेरे उत्तर में इस स्थिति को संभालने का सही तरीका बताया गया है।

— यूजीन लाजुटकिन

3

@robocat का IE से कोई लेना-देना नहीं है: JS ऑब्जेक्ट्स DOM ऑब्जेक्ट्स को मेमोरी में रखते हैं, अंतर्निहित JS ऑब्जेक्ट्स को अन्य JS ऑब्जेक्ट्स के रेफरेंस द्वारा मेमोरी में रखा जाता है। उदाहरण के लिए: एक gfx सतह अपने सभी बच्चों को संदर्भित करती है, एक समूह अपने सभी बच्चों को भी संदर्भित करता है, और इसी तरह। सिर्फ DOM नोड्स को हटाना पर्याप्त नहीं है।

— यूजीन लाजुटकिन

3

@ डेविड-चू-सीए - शायद यूजीन द्वारा बाद के उत्तर (डोजो जीएफएक्स लाइब्रेरी के एक प्राथमिक लेखक) को स्वीकृत जवाब के रूप में चिह्नित किया जाना चाहिए। यूजीन - स्पष्टीकरण के लिए धन्यवाद।

— रोबोकट

45

node.innerHTML = "";

गैर-मानक, लेकिन तेज और अच्छी तरह से समर्थित।

— चेतन एस
स्रोत

2

IE में समर्थित नहीं है। जाँच करें: theogray.com/blog/2009/06/…

— रजत

4

एचटीएमएल 5 में मानक लगता है। उपरोक्त ब्लॉग प्रविष्टि उपयोगकर्ता त्रुटि थी। developer.mozilla.org/en-US/docs/DOM/element.innerHTML

— svachalek

मुझे पूरा यकीन है कि यह समस्या पैदा कर सकता है अगर बच्चा डोम नोड्स का पुन: उपयोग करने जा रहा है, क्योंकि यह "डोम को खाली करता है" (बच्चे को खाली करने के लिए) बच्चे को डोम नोड्स देता है।

— रोबोकट

इसके अलावा उपयोगकर्ता stwissel के अनुसार: innerHTML केवल तभी काम करता है जब आप केवल HTML के साथ काम कर रहे हों। यदि उदाहरण के लिए SVG है तो केवल एलिमेंट रिमूवल ही काम करेगा।

— रोबोकट

6

और नोड्स को हटाने की तुलना में धीमी : jsperf.com/innerhtml-vs-removechild/15

— robocat

24

सबसे पहले आपको एक बार एक सतह बनाने और इसे कहीं न कहीं रखने की आवश्यकता है। उदाहरण:

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

domNode आमतौर पर एक अनसुना है <div> , जिसका उपयोग सतह के लिए प्लेसहोल्डर के रूप में किया जाता है।

आप एक बार में सतह पर सब कुछ साफ कर सकते हैं (सभी मौजूदा आकार की वस्तुओं को अमान्य कर दिया जाएगा, उसके बाद उनका उपयोग न करें):

surface.clear();

सभी सतह से संबंधित कार्यों और विधियों को dojox.gfx.Surface पर आधिकारिक दस्तावेज में पाया जा सकता है । उपयोग के उदाहरणों में पाया जा सकता है dojox/gfx/tests/।

— यूजीन लाजुटकिन
स्रोत

क्या आप कृपया यह भी जोड़ सकते हैं कि सतह कैसे बनाई जाए? यह स्पष्ट नहीं हो सकता है कि मेरे जैसे यहां के उपयोगकर्ता :) :) धन्यवाद

— लुका बोर्रोन

20

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

— जेम्स
स्रोत

1

jQuery 1.x खाली () उस तरह से काम करता है। JQuery 2.x जो केवल आधुनिक ब्राउज़रों का समर्थन करता है, खाली () का उपयोग करता है में elem.textContent = ""; हालांकि सिर्फ इसलिए jQuery करता है यह यह मतलब नहीं है उदाहरण के लिए stwissel गाड़ी नहीं है कहते हैं, "innerHTML ही काम करता है अगर आप केवल HTML के साथ काम कर रहे हैं। यदि वहाँ जैसे केवल तत्व हटाने के अंदर 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 dojo.empty(String|DomNode)(1.8 में चित्रित) का उपयोग करें:

dojo.empty( id or DOM node );

इन emptyतरीकों में से प्रत्येक नोड के सभी बच्चों को सुरक्षित रूप से हटा देता है।

— ब्रायन सी
स्रोत

3

डोजो एपीआई प्रलेखन से :

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 तत्व की सामग्री को सुरक्षित रूप से खाली करें। खाली () सभी बच्चों को हटा देता है लेकिन वहां नोड रखता है।

अधिक विवरण के लिए "डोम-निर्माण" प्रलेखन की जाँच करें।

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

एक DOM तत्व को नष्ट कर देता है। नष्ट () सभी बच्चों और स्वयं नोड को हटा देता है।

— रुई मरकज
स्रोत

1

वह केवल यह चाहता है कि बच्चों को हटा दिया जाए, इसका मतलब है कि domConstruct.empty()इस मामले में बेहतर होगा।

— g00glen00b