दिलचस्प पोस्ट
गतिशील रूप से स्रोत के साथ स्क्रिप्ट टैग जोड़ें जिसमें दस्तावेज़ शामिल हो सकता है InvokeLater का उपयोग करना क्यों महत्वपूर्ण है? अनुमति के लिए पूछने के अलावा, मैं वर्तमान अग्रभूमि प्रक्रिया को परेशान किए बिना एक मीडिया प्रक्षेपण प्रबंधक कैसे प्राप्त करूं? आर में एक ही साजिश में दो रेखांकन प्लोट करें स्ट्रिंग। दशमलव स्थानों के बिना हजारों विभाजक का उपयोग करने के लिए एक पूर्णांक या छोटे पूर्णांक के लिए 0 अग्रणी जब मैं गलत स्वरूप विनिर्देशक का उपयोग करता हूं तो क्या होता है? यह ऐप तब तक नहीं चलेगा जब तक आप Google Play सेवाएं त्रुटि अपडेट नहीं करेंगे स्ट्रिंग के लिए XML दस्तावेज़? क्या एक ईवेंट हैंडलर पहले से जोड़ा गया है? Http अनुरोध के आधार पर वेब अनुप्रयोग में मोबाइल ब्राउज़र का पता लगाने का मानक तरीका एसिंक्रोनस नेटवर्क अनुरोधों के साथ लूप के लिए तेज़ होने तक प्रतीक्षा करें पाठ के मध्य में अंडाकार (मैक शैली) PHP में शामिल (): फ़ाइल आकार और प्रदर्शन अनिर्धारित, अनिर्दिष्ट और कार्यान्वयन-परिभाषित व्यवहार UIPageViewController: वर्तमान दृश्य दृश्य लौटाएं

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

मैं जावास्क्रिप्ट में एक 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; हालांकि अतिरिक्त अंक यदि आप DOM-only उत्तर के साथ jQuery में एक उत्तर भी प्रदान करते हैं

Solutions Collecting From Web of "JavaScript में DOM नोड के सभी बच्चे तत्व निकालें"

विकल्प 1 (बहुत धीमा, नीचे टिप्पणियां देखें):

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

विकल्प 2 (बहुत तेज़):

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

वर्तमान में स्वीकृत उत्तर आंतरिक HTML के बारे में गलत है (कम से कम IE और Chrome में), जैसा कि m93a सही ढंग से उल्लिखित है

क्रोम और एफएफ नाटकीय ढंग से इस पद्धति का उपयोग कर रहे हैं (जो संलग्न किए गए jquery डेटा को नष्ट कर देगा):

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

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

 node.innerHTML = ''; 

इननर एचटीएमएल आपके इवेंट हैंडलर्स को नष्ट नहीं करेगा या जैक्यूआर संदर्भ को तोड़ देगा , यहां समाधान के रूप में भी सिफारिश की गई है: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

सबसे तेज़ डोम हेरफेर पद्धति (पिछले दो की तुलना में अभी भी धीमी है) रेंज हटाने है, लेकिन सीमाएं आईई 9 तक समर्थित नहीं हैं।

 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- dom-node-in-javascript (jsperf रीबूट के लिए नया यूआरएल क्योंकि पुराने यूआरएल संपादन काम नहीं कर रहा है)

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

 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 तरीकों का उपयोग करते हैं, तो वह डेटा रह जाएगा।

यदि आप jQuery का उपयोग करते हैं:

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

यदि आप नहीं करते हैं:

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

सबसे तेज़…

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

एंड्रयू लुशनीकोव के लिए धन्यवाद jsperf.com (कूल साइट!) के लिंक के लिए ।

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

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

आप क्या प्राप्त करने की कोशिश कर रहे हैं पर निर्भर करता है

 element.textContent = ''; 

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

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

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

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

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

यह तत्व के भीतर सभी नोड्स निकाल देगा।

यहाँ एक और तरीका है:

 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(); } 

भीतरी पाठ विजेता है! http://jsperf.com/innerhtml-vs-removechild/133 सभी पिछली परीक्षाओं में माता-पिता नोड के आंतरिक घन को पहले चलने पर हटा दिया गया था और फिर आंतरिक एचटीएमएल या डिलीटबिल्ड जहां खाली डिवेल पर लागू किया गया था।

जावास्क्रिप्ट के माध्यम से एक नोड के बाल नोड को निकालने का सबसे सरल तरीका

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

इसमें प्राप्त करने के लिए कई विकल्प हैं:

सबसे तेज़ ():

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

विकल्प (धीमा):

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

सुझाए गए विकल्पों के साथ बेंचमार्क

मैंने लोगों को देखा:

 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 मैंने भीतरी एचटीएमएल का इस्तेमाल किया यह एक लंबे समय के लिए एक आदत है। तो मैं यह गड़बड़ और मैं वास्तव में एक गति अंतर देखा लोड करने के लिए भीतरी एचटीएम को कुछ समय के लिए अद्यतन करने के लिए ले जाया गया, हालांकि इसके त्वरित ऐड एलेमेंट द्वारा जा रहा है!

आम तौर पर, जावास्क्रिप्ट DOM नोड्स के संदर्भ सूचियों में सरणियों का उपयोग करता है। इसलिए, यह अच्छी तरह से काम करेगा यदि आप HTMLElements सरणी के माध्यम से इसे करने में रुचि रखते हैं। इसके अलावा, ध्यान देने योग्य, क्योंकि मैं JavaScript प्रोटो के बजाय एक सरणी सन्दर्भ का उपयोग कर रहा हूं, यह IE सहित किसी भी ब्राउज़र में काम करना चाहिए।

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

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

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

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

jQuery में आप इसका उपयोग करते हैं:

 $("#target").empty(); 

उदाहरण कोड:

 $("#button").click(function(){ $("#target").empty(); }); 

यह एक शुद्ध जावास्क्रिप्ट है मैं jQuery का उपयोग नहीं कर रहा हूँ, लेकिन यह भी सभी ब्राउज़र में IE में काम करता है

 <div id="my_div"> <p>i am the first child</p> <p>i am another paragraphs</p> <p>enven me also i am another paragraphs</p> </div> <button id ="my_button>Remove nodes ?</button> document.getElementById("my_button").addEventListener("click",function(){ let parent_node =document.getElemetById("my_div"); let last_child =parent_node.lastChild; while(last_child){ parent_node.removeChild(last_child); } }) 

या आप ऐसा करना आसान कर सकते हैं

 document.getElementById("my_button").addEventListener("click",function(){ let parent_node =document.getElemetById("my_div"); parent_node.innerHTML =""; }) 

यदि आप कुछ उस 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 साथ कोई समस्या नहीं है।

JQuery में अन्य तरीकों

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

बस केवल आईई:

 parentElement.removeNode(true); 

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

जीतने के उत्तर से विकल्प 2 ।

 function emptyElement(element) { var myNode = element; while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } } emptyElement(document.body) 

jQuery के साथ:

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