জাভাস্ক্রিপ্টে একটি ডিওএম নোডের সমস্ত শিশু উপাদান সরান

Question

আমি কীভাবে জাভাস্ক্রিপ্টে একটি ডম নোডের সমস্ত শিশু উপাদান সরিয়ে ফেলব?

বলুন আমার কাছে নিম্নলিখিত (কুরুচিপূর্ণ) এইচটিএমএল রয়েছে:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

এবং আমি নোডটি চাই যেমনটি চাই:

var myNode = document.getElementById("foo");

আমি কিভাবে সন্তান দূর করতে পারবে foo, যাতে শুধু <p id="foo"></p>বাকি আছে?

আমি কি শুধু করতে পারি:

myNode.childNodes = new Array();

বা আমি কিছু সংমিশ্রণ ব্যবহার করা উচিত removeElement?

আমি উত্তরটি সরাসরি ডিওএম আপ করাতে চাই; যদিও অতিরিক্ত পয়েন্টগুলি যদি আপনি ডম-কেবল উত্তরের সাথে জিকুয়ারিতে কোনও উত্তর সরবরাহ করেন।

Answer 1

বিকল্প 1 উত্তর: ক্লিয়ারিং innerHTML।

• এই পদ্ধতিটি সহজ, তবে এটি উচ্চ-পারফরম্যান্স অ্যাপ্লিকেশনগুলির জন্য উপযুক্ত নাও হতে পারে কারণ এটি ব্রাউজারের এইচটিএমএল পার্সারকে আহ্বান করে (যদিও ব্রাউজারগুলি সেই ক্ষেত্রে মানটি খালি স্ট্রিংয়ের জন্য অনুকূল করতে পারে )।

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

বিকল্প 1 বি: ক্লিয়ারিং textContent

• উপরে হিসাবে, কিন্তু ব্যবহার .textContent। এমডিএন অনুসারে এটিinnerHTML ব্রাউজারগুলি তাদের এইচটিএমএল পার্সারগুলিকে আরম্ভ করবে না এবং তার পরিবর্তে তাত্ক্ষণিকভাবে এই উপাদানটির সমস্ত শিশুকে একটি #textনোডের সাথে প্রতিস্থাপন করবে than

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

বিকল্প 2 এ: প্রতিটি অপসারণের জন্য লুপিং lastChild:

• ব্যবহৃত এই উত্তরের পূর্বের সম্পাদনা firstChild, তবে lastChildকম্পিউটার-বিজ্ঞানের মতো এটি ব্যবহার করার জন্য আপডেট করা হয়েছে , সাধারণভাবে , সংগ্রহের শেষ উপাদানটিকে প্রথম উপাদানটিকে সরিয়ে ফেলার তুলনায় এটি দ্রুতগতিতে দ্রুততর হয় (সংগ্রহটি কীভাবে বাস্তবায়িত হয় তার উপর নির্ভর করে) )।
• লুপ জন্য চেক চলতে firstChild ধরো যদি এটি পরীক্ষা করার জন্য আরো দ্রুত firstChildতুলনায় lastChild(যেমন উপাদান তালিকা একটি নির্দেশ লিঙ্ক-তালিকা ইউএ দ্বারা হিসাবে প্রয়োগ করা হয়)।

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

বিকল্প 2 বি: প্রতিটি অপসারণের জন্য লুপিং lastElementChild:

• এই পদ্ধতিটি পিতামাতার সমস্ত অ- Element(যথা #textনোড এবং <!-- comments -->) বাচ্চাদের সংরক্ষণ করে (তবে তাদের বংশধর নয়) - এবং এটি আপনার অ্যাপ্লিকেশনে পছন্দসই হতে পারে (যেমন কিছু টেম্প্লেটিং সিস্টেম যা টেম্পলেট নির্দেশাবলী সংরক্ষণের জন্য ইনলাইন এইচটিএমএল মন্তব্য ব্যবহার করে)।
• ইন্টারনেট এক্সপ্লোরার কেবল lastElementChildআই 9 এর জন্য সমর্থন যুক্ত করায় সাম্প্রতিক বছর পর্যন্ত এই পদ্ধতির ব্যবহার করা হয়নি ।

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

বোনাস: Element.clearChildrenবানর-প্যাচ:

• আমরা একটি নতুন পদ্ধতি-সম্পত্তি যুক্ত করতে পারেন Elementমাত্র তা invoking প্রক্রিয়া সহজ করার জন্য জাভাস্ক্রিপ্ট মধ্যে প্রোটোটাইপ el.clearChildren()(যেখানে elহয় কোনো HTML উপাদান বস্তু)।
• (কড়া কথা বলতে গেলে এটি একটি বানর-প্যাচ, কোনও পলিফিল নয়, কারণ এটি কোনও স্ট্যান্ডার্ড ডিওএম বৈশিষ্ট্য বা অনুপস্থিত বৈশিষ্ট্য নয় Note নোট করুন যে বানর-প্যাচিংটি বেশ কয়েকটি পরিস্থিতিতে যথাযথভাবে নিরুৎসাহিত করা হয়েছে।)

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

Comments

JQuery থেকে এই দুটি বিষয় বিবেচনা করা যেতে পারে: এই পদ্ধতিটি কেবলমাত্র শিশু (এবং অন্যান্য বংশধর) উপাদানগুলি নয়, ম্যাচিং উপাদানগুলির সেটগুলির মধ্যে যে কোনও পাঠ্যও সরিয়ে দেয়। এটি কারণ, ডিওএম স্পেসিফিকেশন অনুসারে, কোনও উপাদানের মধ্যে পাঠ্যের যে কোনও স্ট্রিংকে সেই উপাদানটির চাইল্ড নোড হিসাবে বিবেচনা করা হয়। এবং "মেমোরি ফাঁস এড়াতে, jQuery অন্যান্য উপাদানগুলি যেমন উপাদানগুলিকে নিজেরাই সরানোর আগে শিশু উপাদান থেকে ডেটা এবং ইভেন্ট হ্যান্ডলারগুলি সরিয়ে দেয়" "

— জোটোস

বিটিডব্লিউ, লাস্টচাইল্ডটি ব্যবহার করা কিছুটা বেশি কার্যকর বলে মনে হচ্ছে jsperf.com/innerhtml-vs-removechild/15

— আন্দ্রে

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

— অপসারণই

কখনও কখনও কখনও অভ্যন্তরীণ এইচটিএমএল = '' ব্যবহার করবেন না। না। সমস্যাটি হ'ল আইটেমগুলি দেখে মনে হচ্ছে এগুলি সরিয়ে ফেলা হয়েছে তবে অভ্যন্তরীণভাবে নোডগুলি স্থির থাকে এবং জিনিসগুলি ধীর করে দেয়। আপনাকে কোনও কারণে সমস্ত পৃথক নোড অপসারণ করতে হবে। গুগল ক্রোম এবং আইই উভয় পরীক্ষিত। এটি ভুল হওয়ার কারণে দয়া করে অভ্যন্তরীণ এইচটিএমএল "সমাধান" সরিয়ে ফেলার বিষয়টি বিবেচনা করুন।

— কেনজি

@vsync আমি বিশ্বাস করি না কেনজির মন্তব্য সুপ্রতিষ্ঠিত। এরকম innerHTML = ''ধীর, কিন্তু আমি মনে করি না এটা "ভুল"। মেমরি ফাঁসের কোনও দাবি প্রমাণ সহ ব্যাক আপ করা উচিত।

— ক্রিস মিডলটন

Answer 2

বর্তমানে গৃহীত উত্তরটি innerHTMLধীর হওয়া সম্পর্কে ভুল (কমপক্ষে আইআই এবং ক্রোমে), যেমন এম 9৩ এ সঠিকভাবে উল্লেখ করা হয়েছে।

ক্রোম এবং এফএফ এই পদ্ধতিটি ব্যবহার করে নাটকীয়ভাবে দ্রুততর হয়েছে (যা সংযুক্ত জিকোয়ারি ডেটা ধ্বংস করবে):

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

এফএফ এবং ক্রোমের জন্য একটি দূরবর্তী সেকেন্ডে এবং আইইয়ের মধ্যে দ্রুততম:

node.innerHTML = '';

ইনার এইচটিএমএল আপনার ইভেন্ট হ্যান্ডলারগুলিকে ধ্বংস করবে না বা জেকারি রেফারেন্সগুলি ভাঙবে না , এটি সমাধান হিসাবে এখানেও প্রস্তাবিত: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML ।

দ্রুততম ডিওএম ম্যানিপুলেশন পদ্ধতি (আগের দুটি তুলনায় এখনও ধীর) রেঞ্জ অপসারণ, তবে আইই 9 পর্যন্ত রেঞ্জ সমর্থিত নয় supported

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

উল্লিখিত অন্যান্য পদ্ধতিগুলি তুলনামূলক বলে মনে হয়, তবে আউটলেটর, জেকুরি (1.1.1 এবং 3.1.1) ব্যতীত অভ্যন্তরীণ এইচটিএমএল থেকে অনেক ধীরে ধীরে ধীরে ধীরে ধীরে:

$(node).empty();

প্রমাণ এখানে:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- ডোম-নোড-ইন-জাভাস্ক্রিপ্ট (পুরানো ইউআরএল সম্পাদনা কাজ করছে না বলে jsperf পুনরায় বুট করার জন্য নতুন url)

জাস্পিফের "প্রতি-পরীক্ষার লুপ" প্রায়শই "প্রতি-পুনরাবৃত্তি" হিসাবে বোঝা যায় এবং ফলাফলগুলি অর্থহীন হওয়ায় কেবল প্রথম পুনরাবৃত্তির নোড থাকে, পোস্ট করার সময় এই থ্রেডটিতে ভুলভাবে সেট আপ করা হয়েছিল।

Comments

আপনার jsperf সম্পূর্ণরূপে নষ্ট হয়ে গেছে। এটি খুব ভাল প্রমাণ নয়।

— Bryc

এটি বর্তমানে সেরা উত্তর। এই থ্রেডের অন্য সমস্ত কিছুই হ'ল in সমস্ত খারাপ পুরানো পরীক্ষা পরিষ্কার করার জন্য ধন্যবাদ।

— বেন

"ইনার এইচটিএমএল আপনার ইভেন্ট হ্যান্ডলারগুলিকে ধ্বংস করবে না বা কোনও জিকিউরিটি রেফারেন্সগুলিকে গণ্ডগোল করবে না" এটি অনাথ তথ্য ধারণ করে jQuery.cache, যা একটি স্মৃতি ফাঁস করে দেবে কারণ ডেটা পরিচালনা করার জন্য কেবলমাত্র রেফারেন্স কেবলমাত্র ধ্বংস হওয়া উপাদানগুলির মধ্যে ছিল।

"ইনার এইচটিএমএল আপনার ইভেন্ট হ্যান্ডলারগুলি ধ্বংস করবে না বা কোনও জেকোরি রেফারেন্স জগাখিচু করবে না" কনটেইনারটিকে বোঝায়, বাচ্চাদের নয়। cloneNodeধারকটি স্যুইচ করে, যার অর্থ ধারকটির উল্লেখগুলি বজায় থাকে না (jquery বা অন্যথায়)। জ্যাকোরির ক্যাশে উপাদানগুলিকে মুছে ফেলার জন্য jquery ব্যবহার করা উপযোগী করে তুলতে পারে যদি আপনি তাদের সাথে jquery ডেটা সংযুক্ত করেন। আশা করি তারা কোনও সময়ে WeakMaps এ স্যুইচ করুন । $। ক্যাশে আনুষ্ঠানিকভাবে নথিভুক্ত করা হয় না বলে পরিষ্কার করা (বা এমনকি অস্তিত্বেরও)

— npjohns

এখানে jsperf পরীক্ষাগুলি ভেঙে গেছে। পরীক্ষার ইঞ্জিন নিম্নলিখিতটি জানিয়েছে: "ত্রুটি: ডোম নোডগুলি পুনরাবৃত্তির সময় পুনরায় তৈরি করা হয়নি, পরীক্ষার ফলাফল অর্থহীন হবে।"

— প্রেরক

Answer 3

সঙ্গে আধুনিক জাভাস্ক্রিপ্ট ব্যবহার করুন remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

এটি ES5 তে নোড অপসারণ লেখার একটি নতুন উপায়। এটি ভ্যানিলা জেএস এবং পূর্ববর্তী সংস্করণগুলির তুলনায় অনেক ভাল পড়ে ।

বেশিরভাগ ব্যবহারকারীর কাছে আধুনিক ব্রাউজার থাকা উচিত বা আপনি প্রয়োজন হলে ট্রাইপাইল করতে পারেন।

ব্রাউজার সমর্থন - 95% ডিসেম্বর 2019

Comments

প্যারেন্ট.চিল্ডেন / প্যারেন্ট.চাইল্ড নোডগুলি লাইভ তালিকা হওয়ায় লুপের জন্য লুপটি কাজ করবে না; কলিং রিমুচ তালিকাকে সংশোধন করে এবং আপনার পুনরাবৃত্তিকে তাই সমস্ত কিছুর পুনরাবৃত্তি করার গ্যারান্টি নেই। ক্রোমে, যেমন, আপনি প্রতিটি নোড এড়িয়ে চলা শেষ করেন। একটি while (parent.firstChild) { parent.removeChild(parent.firstChild); }লুপ ব্যবহার করা ভাল । বিকাশকারী.মোজিলা.আর.ইন.ইউএস

— ডকস

শীতল শর্টহ্যান্ড, কম পাঠযোগ্য যদিও:while (parent.firstChild && !parent.firstChild.remove());

— গিবল্ট

যখন পারফরম্যান্স কোনও বিশাল চুক্তি না হয় তার জন্য একটি ওয়ান-লাইনার:[...parent.childNodes].forEach(el => el.remove());

এটি টাইপস্ক্রিপ্টে কাজ করে না ... পরিবর্তে ব্যবহার করুনwhile (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); }

— জন হেন্কেল

Answer 4

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

---

আপনার যদি jQuery প্রভাবিত বংশধরদের কোনও সম্ভাবনা থাকে তবে আপনাকে অবশ্যই এমন কিছু পদ্ধতি ব্যবহার করতে হবে যা jQuery ডেটা পরিষ্কার করবে।

$('#foo').empty();

JQuery .empty()পদ্ধতি নিশ্চিত করবে যে উপাদানগুলির সাথে jQuery সম্পর্কিত যে কোনও ডেটা মুছে ফেলা হবে।

আপনি যদি সহজভাবে DOMবাচ্চাদের অপসারণের পদ্ধতিগুলি ব্যবহার করেন তবে সেই ডেটা থাকবে।

Comments

ইনারএইচটিএমএল পদ্ধতিটি এখন পর্যন্ত সবচেয়ে পারফর্মেন্ট। এতে বলা হয়েছে, জ্যাকোরির .empty () দ্বারা ডেটা পরিষ্কার করা হচ্ছে: একটি পুনরাবৃত্ত লুপ (ধীর, তবে মেমরির ব্যবহার উল্লেখযোগ্যভাবে হ্রাস করতে পারে) ব্যবহার করে শিশু ট্যাগগুলির সাথে সম্পর্কিত জ্যাকুয়ের অভ্যন্তরে ডেটা () সরিয়ে দেয়, যদি আপনি ইভেন্টগুলি সংযুক্ত না করেন তবে মেমরি ফাঁস রোধ করে jquery, .onclick = ... ব্যবহার করার মতো। যদি আপনার বাচ্চাদের মধ্যে এমন কোনও ইভেন্ট সরিয়ে ফেলার মতো না থাকে, তবে অভ্যন্তরীণ এইচটিএমএল সেট করে ফেলা হবে না। সুতরাং সর্বোত্তম উত্তরটি - এটি নির্ভর করে।

— ক্রিস মোসচিনি

কেন কেবল ফার্স্টচাইল্ড এক্সপ্রেশনটি সরাসরি সময় লুপের অবস্থায় রাখবেন না? while ( myNode.firstChild ) {

— ভিক্টর জামামানিয়ান

while(fc = myNode.firstChild){ myNode.removeChild(fc); }

— ভ্যালেন

Answer 5

আপনি যদি jQuery ব্যবহার করেন:

$('#foo').empty();

আপনি যদি না:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

Answer 6

দ্রুততর...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

অ্যান্ড্রে লুশনিকভকে jsperf.com (দুর্দান্ত সাইট!) এর লিঙ্কের জন্য ধন্যবাদ জানাই ।

সম্পাদনা: স্পষ্ট করে বলতে গেলে, ফার্স্টচাইল্ড এবং লাস্টচিল্ডের মধ্যে ক্রোমের কোনও পারফরম্যান্সের পার্থক্য নেই। শীর্ষের উত্তরটি পারফরম্যান্সের জন্য একটি ভাল সমাধান দেখায়।

Comments

লিনটি সতর্কতা ব্যতীত একই জিনিস: পরিষ্কার: ফাংশন (ধারক) {for (;;) child var শিশু = ধারক last যদি (! শিশু) বিরতি; ধারক.রেভচিল্ড (শিশু); }}

— cskwg

Answer 7

আপনি যদি কেবল নোডটি তার শিশুদের ছাড়াই রাখতে চান তবে আপনি এটির একটি অনুলিপিও এখানে তৈরি করতে পারেন:

var dupNode = document.getElementById("foo").cloneNode(false);

আপনি কী অর্জন করতে চাইছেন তার উপর নির্ভরশীল।

Comments

আপনি এমনকি এটি সঙ্গে অনুসরণ করতে পারে parent.replaceChild(cloned, original)? এটি একের পর এক শিশুদের অপসারণের চেয়ে দ্রুত হতে পারে এবং এটি ডমকে সমর্থন করে এমন সমস্ত কিছুতে কাজ করা উচিত (সুতরাং এসভিজি সহ প্রতিটি ধরণের এক্সএমএল ডকুমেন্ট)। অভ্যন্তরীণ এইচটিএমএল সেট করা বাচ্চাদের এক এক করে অপসারণের চেয়ে দ্রুত হতে পারে তবে এটি HTML ডকুমেন্ট ব্যতীত অন্য কিছুতে কাজ করে না। কিছু সময় পরীক্ষা করা উচিত।

— মার্টেন

এটি ইভেন্ট শ্রোতাদের ব্যবহার করে অনুলিপি করবে না addEventListener।

— ম্যাথু

যদি আপনি এই সীমাবদ্ধতা নিয়ে বেঁচে থাকতে পারেন তবে এটি অবশ্যই দ্রুত: jsperf.com/innerhtml-vs-removechild/137

— ড্যানম্যান

Answer 8

এখানে অন্য পদ্ধতির:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

Comments

এটি আকর্ষণীয় তবে অন্য পদ্ধতির তুলনায় এটি বেশ ধীর বলে মনে হচ্ছে: jsperf.com/innerhtml-vs-removechild/256

— পোলারিস 878

Answer 9

element.textContent = '';

এটি স্ট্যান্ডার্ড বাদে ইন্টার্নটেক্সটের মতো। এটি তুলনায় কিছুটা ধীর গতিযুক্তremoveChild() তবে এটি ব্যবহার করা সহজ এবং যদি আপনার মুছে ফেলার মতো খুব বেশি জিনিস না থাকে তবে পারফরম্যান্সের খুব বেশি পার্থক্য করতে পারে না।

Comments

একটি পাঠ্য নোড একটি উপাদান নয়

— চেক_কা

দুঃখিত আপনি ঠিক বলেছেন, এটি সত্যই সমস্ত শিশুদের উপাদানগুলি সরিয়ে দেয়

— চেক_কা

এটি ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলিতে কাজ করবে না।

— pwdst

Answer 10

ড্যানম্যানের প্রতিক্রিয়াতে, মার্টেন এবং ম্যাট। একটি নোড ক্লোন করা, পাঠ্য সেট করা সত্যিই আমার ফলাফলের একটি কার্যকর উপায়।

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

এছাড়াও এটি ডোম নয় এমন নোডগুলির জন্য কাজ করে যা প্যারেন্টনোড অ্যাক্সেস করার চেষ্টা করার সময় বাতিল হয়ে যায়। তদ্ব্যতীত, আপনার যদি সুরক্ষিত হওয়ার দরকার হয় তবে বিষয়বস্তু যুক্ত করার আগে একটি নোড খালি রয়েছে এটি সত্যই সহায়ক। নীচে ব্যবহারের ক্ষেত্রে বিবেচনা করুন।

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

কোনও উপাদানটির অভ্যন্তরে একটি স্ট্রিং প্রতিস্থাপন করার সময় আমি এই পদ্ধতিটি খুব দরকারী বলে মনে করি, নোড কী রাখবে তা আপনি যদি নিশ্চিত না হন তবে কীভাবে জগাখিচুড়ি পরিষ্কার করবেন তা চিন্তা করার পরিবর্তে, নতুন করে শুরু করুন।

Comments

সবচেয়ে খারাপ জিনিস। যদি আপনি আসল নোডটির ক্লোন দিয়ে প্রতিস্থাপন করেন তবে আপনি মূল নোডের রেফারেন্স হারাচ্ছেন। ইভেন্ট হ্যান্ডলার এবং অন্যান্য বাইন্ডিংগুলির কোনওটিই কাজ করবে না।

— অরুণ অরবিন্দ 17

Answer 11

এখানে আমি সাধারণত যা করি:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

এবং ভয়েলা, পরে আপনি এর সাথে কোনও ডোম উপাদান খালি করতে পারেন:

anyDom.empty()

Comments

আমি এই সমাধান পছন্দ! খালি স্ট্রিংয়ের অভ্যন্তরীণ এইচটিএমএল সেট করার মাধ্যমে আমার এটি ব্যবহার করা উচিত?

— TheCodenator

পারফরম্যান্স: domEl.innerHTML = ""দরিদ্র এবং খারাপ অনুশীলন হিসাবে বিবেচনা করা হয়

— অ্যাডো রেন

Answer 12

এটি অর্জনের জন্য কয়েকটি বিকল্প রয়েছে:

দ্রুততর ():

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

বিকল্প (ধীর):

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

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

প্রস্তাবিত বিকল্পগুলির সাথে বেঞ্চমার্ক

Answer 13

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

এটি উপাদানটির মধ্যে থাকা সমস্ত নোড সরিয়ে ফেলবে।

Comments

... কারণ এটি অপ্রয়োজনীয় জটিল, এবং এটি কীভাবে কাজ করে (যা আসলে অ-সুস্পষ্ট) এর কোনও ব্যাখ্যা দেওয়া হয়নি, আমার সন্দেহ।

— পেরিটা ব্রেটা

Answer 14

ইনারটেক্সট বিজয়ী! http://jsperf.com/innerhtml-vs-removechild/133 । পূর্ববর্তী সমস্ত পরীক্ষায় প্যারেন্ট নোডের অভ্যন্তরীণ ডোমটি প্রথম পুনরাবৃত্তিতে এবং তারপরে অভ্যন্তরীণ এইচটিএমএল বা রিমুভচিল্ড মুছে ফেলা হয়েছিল যেখানে খালি ডিভিতে প্রয়োগ করা হয়েছে।

Comments

innerTextমালিকানাধীন এমএস জিনিস যদিও। এমনি বলছি.

— ড্যানম্যান

অত্যন্ত নিশ্চিত যে এটি একটি ত্রুটিযুক্ত পরীক্ষা - এটি boxআইডি উপর ভিত্তি করে কোনও ভের হিসাবে না হয়ে ডিওএম whileলুপের মাধ্যমে উপলব্ধ হওয়ার উপর নির্ভর করে এবং যেহেতু লুপটি এই ধীর কলটিকে বহুবার শাস্তিযুক্ত করে তোলে।

— nrabinowitz

Answer 15

জাভাস্ক্রিপ্টের মাধ্যমে নোডের শিশু নোডগুলি সরানোর সহজ উপায়

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

Answer 16

আমি লোককে করতে দেখেছি:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

তারপরে কেউ বলেছে ব্যবহার el.lastNodeকরা আরও দ্রুত

তবে আমি মনে করি এটি সবচেয়ে দ্রুত:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

আপনি কি মনে করেন?

PS: এই বিষয়টি আমার জন্য জীবন রক্ষাকারী ছিল। আমার ফায়ারফক্স অ্যাডন প্রত্যাখ্যানিত হয়ে গেছে আমি অভ্যন্তরীণ এইচটিএমএল ব্যবহার করেছি। এটি দীর্ঘদিন ধরে একটি অভ্যাস ছিল। তাহলে আমি এটাকে বুঝি এবং আমি আসলে একটি গতির পার্থক্য লক্ষ্য করেছি। লোড অন ইন্ডিআরটিএমএল আপডেট করতে কিছুটা সময় নিয়েছে, তবে এটির তাত্ক্ষণিকভাবে অ্যাডিমেন্ট দিয়ে চলছে!

Comments

ভাল আমি মনে করি দ্রুত হোক বা না হোক, কিছু জেএসপিআইপি পরীক্ষা দুটি ক্ষেত্রেই প্রমাণ করতে পারে

— নিকোস এম।

সুপার পরীক্ষার জন্য ধন্যবাদ। তারা for (var i=0...যদিও একটি অন্তর্ভুক্ত না । তবে এই পরীক্ষাগুলি চালানোর সময় আমি যা পেয়েছিলাম তা এখানেই রয়েছে: i.imgur.com/Mn61AmI.png সুতরাং এই তিনটি পরীক্ষায় প্রথম নোড সর্বশেষ নোডের চেয়ে দ্রুততর ছিল এবং সত্যই শীতল

— এইচটিএমএল নোটিডার্ট

আমি পরীক্ষাগুলি যুক্ত করেছি: jsperf.com/innerhtml-vs-removechild/220 আকর্ষণীয় জিনিস el.first নোড পদ্ধতিটি মনে হচ্ছে দ্রুততম উপায়

— Noitidart

Answer 17

একটি রেঞ্জ লুপ ব্যবহার করা আমার কাছে সবচেয়ে স্বাভাবিক মনে হয়:

for (var child of node.childNodes) {
    child.remove();
}

Chrome এবং ফায়ারফক্সে আমার পরিমাপ অনুসারে এটি প্রায় 1.3x ধীর। সাধারণ পরিস্থিতিতে, এটি সম্ভবত বিবেচনা করবে না।

Answer 18

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

Comments

উত্তরে আপনার কোডটি কি করছে তা ব্যাখ্যা করুন?

— নীরভ জোশী

এর স্ব

— বর্ণনামূলক

Answer 19

সাধারণত, জাভাস্ক্রিপ্ট DOM নোডের তালিকা উল্লেখ করতে অ্যারে ব্যবহার করে। সুতরাং, যদি আপনার এইচটিএমএলিমেন্টস অ্যারের মাধ্যমে করার আগ্রহ থাকে তবে এটি দুর্দান্তভাবে কাজ করবে। এছাড়াও, লক্ষণীয় বিষয়, কারণ আমি জাভাস্ক্রিপ্ট প্রোটোর পরিবর্তে একটি অ্যারে রেফারেন্স ব্যবহার করছি এটি IE সহ যে কোনও ব্রাউজারে কাজ করা উচিত।

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

Answer 20

আমরা কেন এখানে সরল পদ্ধতি অনুসরণ করছি না যখন ভিতরে লুপযুক্ত "সরান"।

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• পিতামাতার ডিভিশন নির্বাচন করা
• প্রথম সন্তানের উপাদান নির্মূল করার জন্য একটি লুপের ভিতরে "অপসারণ" পদ্ধতিটি ব্যবহার করা, যতক্ষণ না কোনও বাকী থাকে না।

Comments

দয়া করে আপনার কোডের লাইনগুলি ব্যাখ্যা করুন যাতে অন্যান্য ব্যবহারকারীরা এর কার্যকারিতা বুঝতে পারে। ধন্যবাদ!

— Ignacio আরা

@ ইগনাসিওআর হয়ে গেল!

— নীলাঞ্চ ভার্মা

Answer 21

অন্য কেউ এই প্রশ্নের উল্লেখ কেবল দেখেছিল এবং ভেবেছিল আমি এমন একটি পদ্ধতি যুক্ত করব যা আমি এখনও দেখিনি:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

পরিষ্কার ফাংশনটি উপাদানটি গ্রহণ করছে এবং পিতা-মাতৃ নোডকে শিশুদের ছাড়াই একটি অনুলিপি দ্বারা প্রতিস্থাপন করতে ব্যবহার করছে। উপাদান বিরল হলে খুব বেশি পারফরম্যান্স লাভ হয় না তবে যখন উপাদানটিতে নোড থাকে তবে পারফরম্যান্স লাভগুলি উপলব্ধি হয়।

Comments

আসলে মনে হচ্ছে এটি এখানে উল্লেখ করা হয়েছিল stackoverflow.com/a/15441725/576767

— -গ্রেনিয়ার

ফেলিক্স আমি অবশ্যই এটি মিস করেছি, সংশোধন +1 করার জন্য ধন্যবাদ।

— হ্যারি চিলিংয়েরিয়ান

Answer 22

কার্যক্ষম শুধুমাত্র পদ্ধতির:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

ডমচিল্ডারে "চাইল্ডনোডস" তাত্ক্ষণিক শিশুদের উপাদানগুলির একটি নোডলিস্ট দেবে, যা কোনওটি না পেলে খালি থাকে is নোডলিস্টে মানচিত্রের জন্য, ডমচিল্ডেন এটিকে অ্যারে রূপান্তর করে। domEmpty একটি ফাংশন মানচিত্র dom সরান যা সমস্ত উপাদান এটি সরান।

ব্যবহারের উদাহরণ:

domEmpty(document.body)

সমস্ত শিশুদের শরীরের উপাদান থেকে সরিয়ে দেয়।

Answer 23

JQuery অন্যান্য উপায়

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

Comments

ডাউন-ভোটিং কারণ ওপি বলেছে যে সোজা ডিওমে উত্তর পছন্দ হয়।

— বাইওয়াইন্ডেল

এছাড়াও, jQuery এর .empty()পদ্ধতি রয়েছে, কেবল $("#foo").empty()যথেষ্ট হবে

— YakovL

Answer 24

কেবলমাত্র আইই:

parentElement.removeNode(true);

true - এর অর্থ গভীর সরানো - যার অর্থ সমস্ত শিশুকেও সরানো হয়েছে

Comments

আই ই? এটি একবিংশ শতাব্দী!

— চিরদিনের

Answer 25

সহজতম পথ:

let container = document.getElementById("containerId");
container.innerHTML = "";

Comments

এটি কাজ করার সময়, সাবধান থাকুন যা container.innerHTML = nullইন্টারনেট এক্সপ্লোরারটিকে পাঠ্যটি প্রদর্শন করে null। সুতরাং, এটি সত্যই বাচ্চাদের সরাবে না, আমি বলব।

— আরজান

Answer 26

লুপ জন্য সহজ এবং দ্রুত ব্যবহার !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

এই <span>ট্যাগ কাজ করবে না !

Comments

সর্বোপরি সমস্ত সমাধানে কোনও কোড <span>ট্যাগ সরিয়ে

— দিচ্ছে না

Answer 27

আপনি যদি এটিতে কিছু ফিরিয়ে দিতে চান divতবেinnerHTML সম্ভবত ভালো।

আমার উদাহরণ:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

যদি আমি .firstChildবা .lastChildপদ্ধতিটি ব্যবহার করি তবে displayHTML()ফাংশনটি পরে কাজ করে না তবে .innerHTMLপদ্ধতিটিতে কোনও সমস্যা নেই ।

Answer 28

এটি একটি খাঁটি জাভাস্ক্রিপ্ট আমি jQuery ব্যবহার করছি না তবে সমস্ত ব্রাউজারে এমনকি আইইও কাজ করে এবং এটি বুঝতে ভারি সহজ

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

Answer 29

jQuery সহ:

$("#foo").find("*").remove();

Comments

$('#foo').children().remove()আরও অনেক যৌক্তিক

— ক্রিজিসটফ ডাব্রোস্কি