JavaScript में DOM नोड के सभी चाइल्ड एलिमेंट्स निकालें

Question

मैं जावास्क्रिप्ट में DOM नोड के सभी बाल तत्वों को हटाने के बारे में कैसे जाऊँगा?

कहो मेरे पास निम्नलिखित (बदसूरत) HTML है:

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

मुझे उत्तर डोम के सीधे होने का चाहिए; हालांकि अतिरिक्त बिंदु यदि आप DOM-only उत्तर के साथ jQuery में उत्तर भी प्रदान करते हैं।

Answer 1

विकल्प 1 ए: समाशोधन innerHTML।

• यह दृष्टिकोण सरल है, लेकिन उच्च-प्रदर्शन अनुप्रयोगों के लिए उपयुक्त नहीं हो सकता है क्योंकि यह ब्राउज़र के HTML पार्सर को आमंत्रित करता है (हालांकि ब्राउज़र उस स्थिति के लिए अनुकूलित कर सकते हैं जहां मान एक रिक्त स्ट्रिंग है)।

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होगा क्योंकि ब्राउज़र अपने HTML पार्सर्स को आमंत्रित नहीं करेंगे और इसके बजाय तत्व के सभी बच्चों को तुरंत एक #textनोड के साथ बदल देंगे ।

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 --> माता-पिता के ) बच्चों को (लेकिन उनके वंशज नहीं) - और यह आपके आवेदन में वांछनीय हो सकता है (जैसे कुछ टेम्प्लेटिंग सिस्टम जो टेम्पलेट निर्देशों को संग्रहीत करने के लिए इनलाइन HTML टिप्पणियों का उपयोग करते हैं)।
• इस दृष्टिकोण का उपयोग हाल के वर्षों तक नहीं किया गया था क्योंकि इंटरनेट एक्सप्लोरर ने केवल lastElementChildIE9 में समर्थन जोड़ा था ।

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बस के लिए यह लागू सरल करने के लिए जावास्क्रिप्ट में प्रोटोटाइप el.clearChildren()(जहां elहै किसी भी HTML तत्व वस्तु)।
• (स्पष्ट रूप से यह एक बंदर-पैच है, न कि पॉलीफ़िल, क्योंकि यह एक मानक डोम सुविधा या लापता सुविधा नहीं है। ध्यान दें कि बंदर-पैचिंग को कई स्थितियों में ठीक से हतोत्साहित किया जाता है।)

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 से इन दो मुद्दों पर विचार किया जा सकता है: यह विधि न केवल बच्चे (और अन्य वंशज) तत्वों को हटाती है, बल्कि मिलान किए गए तत्वों के सेट के भीतर किसी भी पाठ को भी हटाती है। ऐसा इसलिए है क्योंकि DOM विनिर्देशन के अनुसार, किसी तत्व के भीतर पाठ के किसी भी स्ट्रिंग को उस तत्व का एक बच्चा नोड माना जाता है। और "मेमोरी लीक से बचने के लिए, jQuery स्वयं तत्वों को हटाने से पहले बाल निर्माण से डेटा और ईवेंट हैंडलर जैसे अन्य निर्माणों को हटा देता है।"

— jottos

Btw, lastChild का उपयोग करना थोड़ा अधिक प्रभावी लगता है jsperf.com/innerhtml-vs-removechild/15

— एंड्री

अगर आप केवल एचटीएमएल के साथ काम कर रहे हैं, तो केवल आंतरिक HTML ही काम करता है। अगर वहाँ उदाहरण के लिए SVG के अंदर ही एलिमेंट रिमूवल काम करेगा

— stwissel

कभी भी इनरव्हील का प्रयोग न करें = ''। मत करो। समस्या यह है कि आइटम ऐसे दिखते हैं जैसे वे हटाए जाते हैं लेकिन आंतरिक रूप से, नोड्स बने रहते हैं और चीजें धीमी हो जाती हैं। आपको एक कारण के लिए सभी व्यक्तिगत नोड्स को निकालना होगा। Google Chrome और IE दोनों में परीक्षण किया गया। कृपया आंतरिक HTML "समाधान" को हटाने पर विचार करें क्योंकि यह गलत है।

— केंजी

@vsync मुझे विश्वास नहीं है कि केनजी की टिप्पणी अच्छी तरह से स्थापित है। करना innerHTML = ''धीमा है, लेकिन मुझे नहीं लगता कि यह "गलत" है। मेमोरी लीक के किसी भी दावे को सबूत के साथ वापस किया जाना चाहिए।

— क्रिस मिडलटन

Answer 2

वर्तमान में स्वीकृत उत्तर innerHTMLधीमा होने के बारे में गलत है (कम से कम IE और क्रोम में), जैसा कि m93a ने सही उल्लेख किया है।

Chrome और FF नाटकीय रूप से इस विधि का उपयोग करके तेज़ हैं (जो संलग्न jquery डेटा को नष्ट कर देगा):

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

दूर के एफएफ और क्रोम के लिए दूसरा, और आईई में सबसे तेज:

node.innerHTML = '';

InnerHTML आपके ईवेंट हैंडलर को नष्ट नहीं करेगा या jquery के संदर्भों को तोड़ देगा , इसे यहाँ समाधान के रूप में भी सुझाया गया है: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML ।

सबसे तेज़ DOM हेरफेर विधि (अभी भी पिछले दो की तुलना में धीमी) रेंज रिमूवल है, लेकिन IE9 तक रेंज समर्थित नहीं हैं।

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

उल्लिखित अन्य विधियां तुलनीय प्रतीत होती हैं, लेकिन इनरएचटीएमएल की तुलना में बहुत अधिक धीमी है, बाहरी, jquery (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-a डोम-नोड-इन-जावास्क्रिप्ट (jsperf रिबूट के लिए नया url क्योंकि पुराने url का संपादन कार्य नहीं कर रहा है)

Jsperf के "per-test-loop" को अक्सर "per-iteration" के रूप में समझा जाता है, और केवल पहली पुनरावृत्ति में नोड्स होते हैं, ताकि परिणाम निरर्थक हो, पोस्ट करने के समय इस थ्रेड में गलत तरीके से सेट किए गए परीक्षण थे।

Comments

आपका jsperf पूरी तरह से टूट गया है। यह बहुत अच्छा सबूत नहीं है।

— bryc

यह वर्तमान में सबसे अच्छा जवाब है। इस धागे में बाकी सब कुछ कीटाणुनाशक है (!) उन सभी खराब पुराने परीक्षणों की सफाई के लिए धन्यवाद।

— बेन

"आंतरिक HTML आपके ईवेंट हैंडलर को नष्ट नहीं करेगा या किसी भी jquery संदर्भ को गड़बड़ करेगा " यह अनाथ किए गए डेटा को jQuery.cacheस्मृति रिसाव का कारण बना देगा, क्योंकि उस डेटा को प्रबंधित करने के लिए उपलब्ध एकमात्र संदर्भ आपके द्वारा नष्ट किए गए तत्वों पर था।

"आंतरिक HTML आपके ईवेंट हैंडलर को नष्ट नहीं करेगा या किसी भी jquery संदर्भ को गड़बड़ करेगा" कंटेनर को संदर्भित करता है, बच्चों को नहीं। cloneNodeकंटेनर को स्विच करता है, जिसका अर्थ है कि कंटेनर के संदर्भ बनाए नहीं रखे जाते हैं (jquery या अन्यथा)। यदि आपके पास उनसे जुड़े डेटा हैं, तो jquery का कैश तत्वों को निकालने के लिए jquery का उपयोग करने के लायक बना सकता है। उम्मीद है कि वे किसी बिंदु पर WeakMaps पर स्विच करें । $ .Cache की सफाई (या यहां तक ​​कि अस्तित्व) आधिकारिक तौर पर प्रलेखित नहीं होती है।

— npjohns

यहां jsperf के परीक्षण टूट जाते हैं। परीक्षण इंजन निम्नलिखित की रिपोर्ट करता है: "त्रुटि: डोम नोड्स पुनरावृत्तियों के दौरान पुन: निर्मित नहीं होते हैं, परीक्षा परिणाम अर्थहीन होगा।"

— प्रेषित

Answer 3

आधुनिक जावास्क्रिप्ट का उपयोग करें, के साथ remove!

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

यह ES5 में नोड रिमूवल लिखने का एक नया तरीका है। यह वैनिला जेएस है और पिछले संस्करणों की तुलना में बहुत अच्छा है।

अधिकांश उपयोगकर्ताओं के पास आधुनिक ब्राउज़र होना चाहिए या यदि आवश्यक हो तो आप नीचे ट्रांसपाइल कर सकते हैं।

ब्राउज़र समर्थन - 95% दिसंबर 2019

Comments

लूप के लिए काम नहीं करेगा क्योंकि parent.children / parent.childNodes लाइव सूची है; कॉलिंग हटाए जाने से सूची और आपका पुनरावृत्ति संशोधित हो जाता है इसलिए हर चीज़ पर पुनरावृति की गारंटी नहीं है। क्रोम में, उदाहरण के लिए, आप हर दूसरे नोड को छोड़ देते हैं। एक while (parent.firstChild) { parent.removeChild(parent.firstChild); }लूप का उपयोग करने के लिए बेहतर है । developer.mozilla.org/en-US/docs/Web/API/ParentNode/children developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

— qQ

कूल शॉर्टहैंड, हालांकि कम पठनीय: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

आंतरिक HTML विधि अब तक सबसे अधिक प्रदर्शन करने वाली है। उस ने कहा, jquery के .empty () द्वारा डेटा को साफ किया जा रहा है: एक पुनरावर्ती लूप का उपयोग करके बच्चे के टैग से जुड़े jquery के अंदर डेटा () को समाप्त करता है (धीमी गति से, लेकिन मेमोरी के उपयोग को काफी कम कर सकता है), Prevents leaks यदि आप बिना इवेंट से जुड़े हुए हैं। jquery, .onclick = ... का उपयोग करने की तरह। यदि आपके पास हटाए जाने वाले बच्चों में ऐसी कोई घटना नहीं है, तो इनर HTML सेट करना लीक नहीं होगा। तो सबसे अच्छा जवाब है - यह निर्भर करता है।

— बजे क्रिस मोसची

सीधे लूप की स्थिति में सीधे पहले चाइल्ड अभिव्यक्ति को क्यों नहीं रखा गया? 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 (शांत साइट!) के लिए अपने लिंक के लिए एंड्री लुश्निकोव को धन्यवाद ।

EDIT: स्पष्ट होने के लिए, Chrome में FirstChild और lastChild के बीच कोई प्रदर्शन अंतर नहीं है। शीर्ष उत्तर प्रदर्शन के लिए एक अच्छा समाधान दिखाता है।

Comments

LINT चेतावनी के बिना एक ही बात: स्पष्ट: फ़ंक्शन (कंटेनर) {के लिए; (?) {Var child = container.lastChild; अगर (बच्चा) टूट जाता है; कंटेनर। सुप्रीमोचाइल्ड (बच्चा); }}

— cskwg

Answer 7

यदि आप केवल अपने बच्चों के बिना नोड चाहते हैं तो आप इसकी एक प्रति भी इस तरह बना सकते हैं:

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

इस बात पर निर्भर करता है कि आप क्या हासिल करने की कोशिश कर रहे हैं।

Comments

शायद तुम भी इस के साथ पालन कर सकता है parent.replaceChild(cloned, original)? यह एक-एक करके बच्चों को हटाने से अधिक तेज़ हो सकता है और उन्हें डोम (एसवीजी सहित हर तरह के एक्सएमएल दस्तावेज़) का समर्थन करने वाली हर चीज़ पर काम करना चाहिए। अंदरुनी HTML सेट करना एक-एक करके बच्चों को हटाने से भी तेज हो सकता है, लेकिन यह HTML दस्तावेज़ों पर कुछ भी काम नहीं करता है। कुछ समय परीक्षण करना चाहिए।

— मार्टन

ईवेंट श्रोताओं की प्रतिलिपि का उपयोग करके जोड़ा नहीं जाएगा addEventListener।

— मैथ्यू

यदि आप उस सीमा के साथ रह सकते हैं, तो यह निश्चित रूप से जल्दी है: jsperf.com/innerhtml-vs-removechild/137

— DanMan

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

— Polaris878

Answer 9

element.textContent = '';

यह मानक को छोड़कर इनरटेक्स्ट की तरह है। यह थोड़ा धीमा है removeChild(), लेकिन इसका उपयोग करना आसान है और यदि आपके पास हटाने के लिए बहुत अधिक सामान नहीं है, तो बहुत अधिक प्रदर्शन अंतर नहीं होगा।

Comments

एक टेक्स्ट नोड एक तत्व नहीं है

— check_ca

क्षमा करें, आप सही हैं, यह वास्तव में सभी बच्चों के तत्वों को हटा देता है

— check_ca

यह Internet Explorer के पुराने संस्करणों में काम नहीं करेगा।

— pwdst

Answer 10

DanMan, Maarten और मैट के जवाब में। पाठ सेट करने के लिए एक नोड क्लोनिंग, वास्तव में मेरे परिणामों में एक व्यवहार्य तरीका है।

// @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

अब तक की सबसे बुरी बात। यदि आप मूल नोड को इसके क्लोन के साथ बदल रहे हैं, तो आप मूल नोड का संदर्भ खो रहे हैं। ईवेंट हैंडलर और अन्य बाइंडिंग में से कोई भी काम नहीं करेगा।

— अरुण अरविंद

Answer 11

यहाँ मैं आमतौर पर क्या है:

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

और वोइला, बाद में आप किसी भी डोम तत्व को खाली कर सकते हैं:

anyDom.empty()

Comments

मुझे यह समाधान पसंद है! किसी भी कारण से मुझे इनर HTML को खाली स्ट्रिंग पर सेट करने में उपयोग करना चाहिए?

— 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एक मालिकाना एमएस बात है, हालांकि। बस केह रहा हू।

— DanMan

बहुत यकीन है कि यह एक त्रुटिपूर्ण परीक्षण है - यह 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: यह विषय मेरे लिए एक जीवन रक्षक था। मेरे फ़ायरफ़ॉक्स ऐडऑन को अस्वीकार कर दिया गया cuz i का उपयोग मैंने इनर। html किया। इसकी आदत लंबे समय से थी। तो मैं यह foudn। और मैं वास्तव में एक गति अंतर देखा। लोड करने पर इनरहैम को अपडेट करने में थोड़ी देर लगी, हालाँकि इसके तुरंत जुड़ने से!

Comments

अच्छी तरह से मुझे लगता है कि सबसे तेज है या नहीं, कुछ jsperf परीक्षण या तो मामला साबित कर सकते हैं

— निकोस एम।

उन परीक्षणों के लिए सुपर काम धन्यवाद। वे for (var i=0...हालांकि एक भी शामिल नहीं है । लेकिन यहाँ है कि मैं क्या मिला जब मैंने उन परीक्षणों को चलाया: i.imgur.com/Mn61AmI.png तो उन तीन परीक्षणों में पहले Node पिछलेNode और InnerHTML की तुलना में तेज़ था जो वास्तविक शांत है

— Noitidart

मैंने परीक्षण जोड़े: jsperf.com/innerhtml-vs-removechild/220 दिलचस्प सामान el.firstNode विधि सबसे तेज़ तरीका है जो ऐसा लगता है

— Noitidart

Answer 17

रेंज लूप का उपयोग करना मेरे लिए सबसे स्वाभाविक है:

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

क्रोम और फ़ायरफ़ॉक्स में मेरे माप के अनुसार, यह लगभग 1.3x धीमा है। सामान्य परिस्थितियों में, यह शायद मायने नहीं रखेगा।

Answer 18

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

Comments

कृपया जवाब में बताएं कि आपका कोड क्या कर रहा है?

— नीरव जोशी

इसके आत्म व्याख्यात्मक

— Blacksheep

Answer 19

आम तौर पर, जावास्क्रिप्ट डोमेन के नोड्स को संदर्भित करने के लिए सरणियों का उपयोग करता है। तो, यह अच्छी तरह से काम करेगा यदि आप HTMLElements सरणी के माध्यम से इसे करने में रुचि रखते हैं। इसके अलावा, ध्यान देने योग्य है, क्योंकि मैं जावास्क्रिप्ट प्रोटो के बजाय एक सरणी संदर्भ का उपयोग कर रहा हूं, इसे 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

कृपया अपनी कोड की पंक्तियों की व्याख्या करें ताकि अन्य उपयोगकर्ता इसकी कार्यक्षमता को समझ सकें। धन्यवाद!

— इग्नासियो आरा

@IgnacioAra हो गया!

— नीलांश वर्मा

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

— Félix Gagnon-Grenier

फेलिक्स मुझे याद आया होगा कि, सुधार के लिए धन्यवाद +1।

— हैरी चिलिंगेरियन

Answer 22

कार्यात्मक केवल दृष्टिकोण:

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

डोमचिल्ड्रेन में "चाइल्डनॉड्स" तत्काल बच्चों के तत्वों का एक नोडलिस्ट देगा, जो खाली है जब कोई भी नहीं पाया जाता है। नोडलिस्ट पर नक्शा करने के लिए, डोमचिल्रेन इसे सरणी में परिवर्तित करता है। domEmpty किसी फ़ंक्शन को हटाता है जो सभी तत्वों पर हावी होता है जो इसे हटा देता है।

उदाहरण उपयोग:

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()पर्याप्त होगा

— योकोवेल

Answer 24

केवल IE:

parentElement.removeNode(true);

true - गहरी हटाने का मतलब है - जिसका अर्थ है कि सभी बच्चे भी हटा दिए गए हैं

Comments

अर्थात? यह 21 वीं सदी है!

— सदाबहार

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 का उपयोग नहीं कर रहा हूं लेकिन सभी ब्राउज़र में भी काम करता है IE और यह समझने में सरल है

   <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()बहुत अधिक तार्किक

— Krzysztof Dąbrowski