সমস্ত বাচ্চাদের DOM উপাদানগুলিতে ডিভের মধ্যে সরান

126

ডিভের অধীনে একটি পৃষ্ঠের গ্রাফিক্স উপাদান তৈরি করতে আমার কাছে নীচের ডোজো কোড রয়েছে:

....
<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>

এটি আবার অন্য গ্রাফিক্স আঁকবে। আমার ডিভের অধীনে সমস্ত গ্রাফিকগুলি পরিষ্কার করতে হবে এবং তারপরে আবার তৈরি করতে হবে। এটি করার জন্য আমি কীভাবে কিছু ডোজো কোড যুক্ত করতে পারি?

javascript dojox.gfx

— David.Chu.ca
সূত্র

286

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

— মরিস পেরি
সূত্র

17

কেবলমাত্র পেডেন্টিক হতে --- জেএস বস্তুর সাথে সম্পর্কিত না করে ডিওএম নোডগুলি সরিয়ে ফেলা মেমোরি ফাঁস হতে পারে।

— ইউজিন লাজুতিন

2

@ ইউজিন: আপনি কি এই সম্পর্কে আরও বলতে পারেন?

— টম অ্যান্ডারসন

7

@ টম: dojox.gfx অন্তর্নিহিত গ্রাফিক্স সিস্টেমের সাথে যোগাযোগের জন্য জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করে, যার ডোম নোড (এসভিজি, ভিএমএল) থাকতে পারে না (সিলভারলাইট, ফ্ল্যাশ, ক্যানভাস) থাকতে পারে। DOM থেকে DOM নোডগুলি সরিয়ে ফেলা জাভাস্ক্রিপ্ট অবজেক্টগুলিকে সরিয়ে দেয় না এবং এটি DOM নোডগুলি সরিয়ে দেয় না কারণ জাভাস্ক্রিপ্ট অবজেক্টগুলিতে এখনও সেই DOM নোডের উল্লেখ রয়েছে। এই পরিস্থিতিটি পরিচালনা করার সঠিক উপায়টি এই প্রশ্নের জন্য আমার উত্তরে বর্ণিত হয়েছে।

— ইউজিন লাজুতিন

3

@robocat এর সাথে আইইয়ের কোনও সম্পর্ক নেই: জেএস অবজেক্টস রেফারেন্স ডিওএম অবজেক্টগুলিকে মেমরিতে রাখে, অন্তর্নিহিত জেএস বস্তুগুলি অন্য জেএস বিষয়বস্তুগুলির রেফারেন্স দ্বারা মেমরিতে রাখে। উদাহরণস্বরূপ: একটি জিএফএক্স পৃষ্ঠ তার সমস্ত শিশুদের রেফারেন্স করে, একটি গ্রুপ তার সমস্ত শিশুদেরও উল্লেখ করে এবং আরও অনেক কিছু। শুধু ডোম নোডগুলি মুছে ফেলা যথেষ্ট নয়।

— ইউজিন লাজুতকিন

3

@ ডেভিড-চু-সিএ - সম্ভবত ইউজিনের পরবর্তী উত্তর (দোজো জিএফএক্স লাইব্রেরির প্রাথমিক লেখক) গ্রহণযোগ্য উত্তর হিসাবে চিহ্নিত করা উচিত। ইউজিন - স্পষ্টির জন্য ধন্যবাদ।

— রোবোক্যাট

45

node.innerHTML = "";

মানহীন, তবে দ্রুত এবং ভাল সমর্থিত।

— চেতন এস
সূত্র

2

আইই সমর্থিত নয়। চেক করুন: theogray.com/blog/2009/06/…

— রজত

4

এইচটিএমএল 5 এ স্ট্যান্ডার্ড বলে মনে হচ্ছে উপরের ব্লগ এন্ট্রিটি ব্যবহারকারীর ত্রুটি ছিল। developer.mozilla.org/en-US/docs/DOM/element.innerHTML

— svachalek

আমি মোটামুটি নিশ্চিত যে চাইল্ড ডিওএম নোডগুলি পুনরায় ব্যবহার করা হলে এটি সমস্যার সৃষ্টি করতে পারে, কারণ এটি শিশু ডিওএম নোডগুলি "সাফ" করে দেয় (ফাঁকা করে দেয়)।

— রোবোক্যাট

ব্যবহারকারীর স্টুইজেল অনুসারে: অভ্যন্তর এইচটিএমএল কেবলমাত্র তখনই কাজ করে যদি আপনি কেবল এইচটিএমএল নিয়ে কাজ করেন। যদি SVG এর ভিতরে থাকে তবে কেবলমাত্র এলিমেন্ট অপসারণ কাজ করবে।

— রোবোক্যাট

6

এবং নোডগুলি অপসারণের তুলনায় ধীর : jsperf.com/innerhtml-vs-removechild/15

— রোবোক্যাট

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 এর অর্থ এই নয় যে এটি বগি নয় উদাহরণস্বরূপ স্টুইসেল বলেছে "কেবলমাত্র আপনি যদি এইচটিএমএল নিয়ে কাজ করেন তবে কেবলমাত্র অভ্যন্তরীণ এইচটিএমএল কাজ করে eg কেবলমাত্র এলিমেন্ট অপসারণের ভিতরে এসভিজি কাজ করবে "। : এছাড়াও এখানে অন্যান্য প্রাসঙ্গিক নোট দেখতে stackoverflow.com/questions/3955229/...

— robocat

18

দোজো ১.7 বা আরও নতুনতে, ব্যবহার করুন domConstruct.empty(String|DomNode):

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

পুরানো দোজোতে, dojo.empty(String|DomNode)(ডোজো ১.৮ এ অবমূল্যায়ন) ব্যবহার করুন:

dojo.empty( id or DOM node );

এই প্রতিটি emptyপদ্ধতি নিরাপদে নোডের সমস্ত বাচ্চাদের সরিয়ে দেয়।

— ব্রায়ান সি
সূত্র

3

Dojo API ডকুমেন্টেশন থেকে :

dojo.html._emptyNode(node);

— চেজ সেয়বার্ট
সূত্র

2

আপনি যদি কোনও আধুনিক> 1.7 ডোজো সমস্ত নোডের বাচ্চাদের ধ্বংস করার উপায় খুঁজছেন তবে এই উপায়:

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

কোনও ডিওএম উপাদানের সামগ্রী নিরাপদে খালি করুন। খালি () সমস্ত বাচ্চা মুছে ফেলে তবে নোডটি সেখানে রাখে।

আরও তথ্যের জন্য "ডোম-কনস্ট্রাক্ট" ডকুমেন্টেশন পরীক্ষা করুন।

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

একটি ডিওএম উপাদান ধ্বংস করে। ধ্বংস () সমস্ত শিশু এবং নোড নিজেই মুছে দেয়।

— রুই মার্কস
সূত্র

1

তিনি কেবল চান বাচ্চাদের অপসারণ করা, এর অর্থ domConstruct.empty() এই ক্ষেত্রে ভাল।

— g00glen00b